Card

// owner: Sona
"use client";

import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { Button } from "@/components/ui/button";

export default function CardExample() {
  return (
    <div className="grid gap-6 md:grid-cols-2">
      <Card>
        <CardHeader>
          <CardTitle>Team workspace</CardTitle>
          <CardDescription>
            Invite collaborators to build with you.
          </CardDescription>
        </CardHeader>
        <CardContent className="text-sm text-muted-foreground">
          You can add up to 25 members to this workspace. Billing is handled per
          seat.
        </CardContent>
        <CardFooter>
          <Button>Invite teammates</Button>
        </CardFooter>
      </Card>
      <Card>
        <CardHeader>
          <CardTitle>Usage</CardTitle>
          <CardDescription>Monthly automation minutes</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="text-4xl font-semibold">18,421</div>
          <p className="text-xs text-muted-foreground">+12% vs last month</p>
        </CardContent>
        <CardFooter>
          <Button variant="ghost">View details</Button>
        </CardFooter>
      </Card>
    </div>
  );
}