Card

1"use client"23import {4  Card,5  CardImage,6  CardHeader,7  CardTitle,8  CardDescription,9  CardAction,10} from '@/components/ui/card'11import { Button } from '@/components/ui/button'1213export function TravelCard() {14  return (15    <Card className="w-[350px]">16      <CardImage17        src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800"18        alt="Mountain landscape"19      />20      <CardHeader>21        <CardTitle>Swiss Alps Adventure</CardTitle>22        <CardDescription>23          Experience breathtaking views on a 7-day guided hiking tour through24          the Swiss Alps, featuring scenic mountain trails and charming25          alpine villages.26        </CardDescription>27        <CardAction>28          <Button variant="outline" size="sm" data-card-hover-action>29            View30          </Button>31        </CardAction>32      </CardHeader>33    </Card>34  )35}

1"use client"23import {4  Card,5  CardHeader,6  CardTitle,7  CardContent,8} from '@/components/ui/card'910// Icon components for stats cards11function DollarIcon() {12  return (13    <svg className="h-4 w-4 text-muted-foreground" fill="none" stroke="currentColor" viewBox="0 0 24 24">14      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />15    </svg>16  )17}1819function UserIcon() {20  return (21    <svg className="h-4 w-4 text-muted-foreground" fill="none" stroke="currentColor" viewBox="0 0 24 24">22      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />23    </svg>24  )25}2627export function StatsCards() {28  return (29    <div className="grid gap-4 sm:grid-cols-2">30      <Card className="min-w-[140px]">31        <CardHeader className="flex flex-row items-center justify-between">32          <CardTitle>Total Sales</CardTitle>33          <DollarIcon />34        </CardHeader>35        <CardContent>36          <p className="text-3xl font-bold">$45,231</p>37          <p className="text-xs text-muted-foreground">+20.1% from last month</p>38        </CardContent>39      </Card>40      <Card className="min-w-[140px]">41        <CardHeader className="flex flex-row items-center justify-between">42          <CardTitle>Active Users</CardTitle>43          <UserIcon />44        </CardHeader>45        <CardContent>46          <p className="text-3xl font-bold">2,350</p>47          <p className="text-xs text-muted-foreground">+180 since last hour</p>48        </CardContent>49      </Card>50    </div>51  )52}

1"use client"23import {4  Card,5  CardHeader,6  CardTitle,7  CardDescription,8  CardContent,9} from '@/components/ui/card'1011export function ProfileCard() {12  return (13    <Card className="w-[350px]">14      <CardHeader>15        <div className="flex items-center gap-4">16          <img17            src="https://api.dicebear.com/7.x/avataaars/svg?seed=Emily"18            alt="Emily Chen"19            className="h-12 w-12 rounded-full"20          />21          <div>22            <CardTitle>Emily Chen</CardTitle>23            <CardDescription>Senior Product Designer</CardDescription>24          </div>25        </div>26      </CardHeader>27      <CardContent className="grid gap-2 text-sm">28        <div className="flex items-center gap-2">29          <span className="text-muted-foreground">Email:</span>30          <span>emily.chen@example.com</span>31        </div>32        <div className="flex items-center gap-2">33          <span className="text-muted-foreground">Phone:</span>34          <span>+1 (555) 123-4567</span>35        </div>36      </CardContent>37    </Card>38  )39}

1"use client"23import {4  Card,5  CardHeader,6  CardTitle,7  CardDescription,8  CardContent,9  CardAction,10  CardFooter,11} from '@/components/ui/card'12import { Button } from '@/components/ui/button'13import { Input } from '@/components/ui/input'14import { Label } from '@/components/ui/label'1516export function LoginForm() {17  return (18    <Card className="w-full max-w-sm">19      <CardHeader>20        <CardTitle>Login to your account</CardTitle>21        <CardDescription>22          Enter your email below to login to your account23        </CardDescription>24        <CardAction>25          <Button variant="link">Sign Up</Button>26        </CardAction>27      </CardHeader>28      <CardContent>29        <form>30          <div className="flex flex-col gap-4">31            <div className="grid gap-2">32              <Label htmlFor="email">Email</Label>33              <Input id="email" type="email" placeholder="m@example.com" />34            </div>35            <div className="grid gap-2">36              <div className="flex items-center justify-between">37                <Label htmlFor="password">Password</Label>38                <Button variant="link" className="ml-auto h-auto p-0">39                  Forgot your password?40                </Button>41              </div>42              <Input id="password" type="password" />43            </div>44          </div>45        </form>46      </CardContent>47      <CardFooter>48        <Button type="submit" className="w-full">Login</Button>49      </CardFooter>50    </Card>51  )52}