Components
Loading preview...
Here is Login Card component
@arihantcodes_1f7b8c4d
npx shadcn@latest add https://21st.dev/r/arihantcodes_1f7b8c4d/login-card-1'use client';
import { useCallback, useLayoutEffect, useRef, useState } from 'react';
import Copy from '../copy';
import {
Card,
CardContent,
CardDescription,
CardFooter,
CardHeader,
CardTitle,
} from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Switch } from '@/components/ui/switch';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from '@/components/ui/select';
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import { Badge } from '@/components/ui/badge';
import { Progress } from '@/components/ui/progress';
import { Slider } from '@/components/ui/slider';
import {
Bell,
Calendar,
Check,
Cloud,
CreditCard,
Download,
LucideBarChart,
LucideLineChart,
LucidePieChart,
Map,
Mic,
Moon,
Music,
Phone,
Search,
Star,
Sun,
Zap,
} from 'lucide-react';
import { DollarSign, TrendingUp, Users } from 'lucide-react';
import { ChartContainer, ChartTooltip, ChartTooltipContent } from '@/components/ui/chart';
import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from 'recharts';
import { Bar, BarChart, CartesianGrid, Line, LineChart, XAxis } from 'recharts';
import { GetDimensions, GridStyle, GridColumns, addGridStyle, addGridBorders } from '@/utils/GridStyle';
import { useTheme } from 'next-themes';
export default function SettingsCard() {
const [activeTab, setActiveTab] = useState("account")
return (
<Card className="w-[310px]">
<CardHeader>
<CardTitle>Settings</CardTitle>
<CardDescription>
Manage your account settings and preferences.
</CardDescription>
</CardHeader>
<CardContent>
<Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
<TabsList className="grid w-full grid-cols-2 mb-4">
<TabsTrigger value="account">Account</TabsTrigger>
<TabsTrigger value="notifications">Notifications</TabsTrigger>
</TabsList>
<TabsContent value="account">
<div className="space-y-4 py-2 ">
<div className="space-y-2 mt-5">
<Label htmlFor="username">Username</Label>
<Input id="username" placeholder="Enter username" />
</div>
<div className="space-y-2">
<Label htmlFor="email">Email</Label>
<Input id="email" type="email" placeholder="Enter email" />
</div>
<div className="space-y-2">
<Label htmlFor="language">Language</Label>
<Select>
<SelectTrigger id="language">
<SelectValue placeholder="Select language" />
</SelectTrigger>
<SelectContent>
<SelectItem value="en">English</SelectItem>
<SelectItem value="fr">French</SelectItem>
<SelectItem value="de">German</SelectItem>
</SelectContent>
</Select>
</div>
</div>
</TabsContent>
<TabsContent value="notifications">
<div className="space-y-4 py-2">
<div className="flex items-center space-x-2">
<Switch id="emailNotifications" />
<Label htmlFor="emailNotifications">Email Notifications</Label>
</div>
<div className="flex items-center space-x-2">
<Switch id="pushNotifications" />
<Label htmlFor="pushNotifications">Push Notifications</Label>
</div>
<div className="flex items-center space-x-2">
<Switch id="weeklyDigest" />
<Label htmlFor="weeklyDigest">Weekly Digest</Label>
</div>
</div>
</TabsContent>
</Tabs>
</CardContent>
<CardFooter>
<Button className="w-full">Save Changes</Button>
</CardFooter>
</Card>
)
}