Card

"use client";

import { TrendingUp } from "lucide-react";

import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/registry/base/ui/card";

export default function Card01() {
  return (
    <Card className="w-full max-w-xs">
      <CardHeader>
        <CardDescription>Monthly recurring revenue</CardDescription>
        <CardTitle className="text-3xl font-semibold tabular-nums">
          $48,290
        </CardTitle>
      </CardHeader>
      <CardContent className="flex items-center gap-1.5 text-sm">
        <TrendingUp
          aria-hidden="true"
          className="size-4 text-emerald-600 dark:text-emerald-400"
        />
        <span className="font-medium text-emerald-600 dark:text-emerald-400">
          +8.2%
        </span>
        <span className="text-muted-foreground">vs. last month</span>
      </CardContent>
    </Card>
  );
}

"use client";

import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/registry/base/ui/card";
import { Label } from "@/registry/base/ui/label";
import { Switch } from "@/registry/base/ui/switch";

const settings = [
  {
    id: "card-02-comments",
    label: "Comments",
    description: "Get notified when someone replies to your thread.",
    defaultChecked: true,
  },
  {
    id: "card-02-mentions",
    label: "Mentions",
    description: "Get notified when someone mentions you.",
    defaultChecked: true,
  },
  {
    id: "card-02-newsletter",
    label: "Product newsletter",
    description: "Occasional emails about new features and updates.",
    defaultChecked: false,
  },
];

export default function Card02() {
  return (
    <Card className="w-full max-w-sm">
      <CardHeader>
        <CardTitle>Notification settings</CardTitle>
        <CardDescription>Choose what you want to be notified about.</CardDescription>
      </CardHeader>
      <CardContent className="flex flex-col gap-4">
        {settings.map((setting) => (
          <div key={setting.id} className="flex items-start justify-between gap-4">
            <div className="flex flex-col gap-0.5">
              <Label htmlFor={setting.id}>{setting.label}</Label>
              <span className="text-xs text-muted-foreground">
                {setting.description}
              </span>
            </div>
            <Switch id={setting.id} defaultChecked={setting.defaultChecked} />
          </div>
        ))}
      </CardContent>
    </Card>
  );
}

"use client";

import { Avatar, AvatarFallback } from "@/registry/base/ui/avatar";
import { Button } from "@/registry/base/ui/button";
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/registry/base/ui/card";

const members = [
  { name: "Emma Wilson", role: "Product Designer", initials: "EW" },
  { name: "James Carter", role: "Frontend Engineer", initials: "JC" },
  { name: "Sofia Reyes", role: "Product Manager", initials: "SR" },
];

export default function Card03() {
  return (
    <Card className="w-full max-w-sm">
      <CardHeader>
        <CardTitle>Team members</CardTitle>
        <CardDescription>People with access to this project.</CardDescription>
      </CardHeader>
      <CardContent className="flex flex-col gap-4">
        {members.map((member) => (
          <div key={member.name} className="flex items-center gap-3">
            <Avatar>
              <AvatarFallback>{member.initials}</AvatarFallback>
            </Avatar>
            <div className="flex flex-col">
              <span className="text-sm font-medium">{member.name}</span>
              <span className="text-xs text-muted-foreground">{member.role}</span>
            </div>
          </div>
        ))}
      </CardContent>
      <CardFooter>
        <Button variant="outline" className="w-full">
          Invite
        </Button>
      </CardFooter>
    </Card>
  );
}

"use client";

import { Badge } from "@/registry/base/ui/badge";
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/registry/base/ui/card";
import { Progress, ProgressLabel, ProgressValue } from "@/registry/base/ui/progress";

export default function Card04() {
  return (
    <Card className="w-full max-w-sm">
      <CardHeader>
        <CardTitle>Design system refresh</CardTitle>
        <CardDescription>
          Unify tokens and components across the product.
        </CardDescription>
      </CardHeader>
      <CardContent>
        <Progress value={68} className="w-full">
          <div className="flex w-full items-center justify-between">
            <ProgressLabel>Tasks completed</ProgressLabel>
            <ProgressValue />
          </div>
        </Progress>
      </CardContent>
      <CardFooter className="flex items-center justify-between">
        <Badge variant="secondary">In progress</Badge>
        <span className="text-xs text-muted-foreground">Due Sep 30</span>
      </CardFooter>
    </Card>
  );
}