Card

import {
  Card,
  CardDescription,
  CardHeader,
  CardTitle,
} from '@brika/clay/components/card';
/** Six accent variants mapped to the theme data-* palette. */
export default function CardAccentDemo() {
  const accents = ['blue', 'emerald', 'orange', 'violet', 'purple', 'amber'] as const;
  return (
    <div className="flex flex-wrap gap-3">
      {accents.map((accent) => (
        <Card key={accent} accent={accent} className="w-36">
          <CardHeader>
            <CardTitle className="capitalize text-sm">{accent}</CardTitle>
            <CardDescription className="text-xs">data-{accents.indexOf(accent) + 1}</CardDescription>
          </CardHeader>
        </Card>
      ))}
    </div>
  );
}

import { Button } from '@brika/clay/components/button';
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from '@brika/clay/components/card';
import { Input } from '@brika/clay/components/input';
import { Label } from '@brika/clay/components/label';

/** Form card pattern, title, inputs, and a footer action. */
export default function CardFormDemo() {
  return (
    <Card className="w-80">
      <CardHeader>
        <CardTitle>Account details</CardTitle>
        <CardDescription>Update your display name and email address.</CardDescription>
      </CardHeader>
      <CardContent className="flex flex-col gap-4">
        <div className="flex flex-col gap-1.5">
          <Label htmlFor="display-name">Display name</Label>
          <Input id="display-name" defaultValue="Jane Doe" />
        </div>
        <div className="flex flex-col gap-1.5">
          <Label htmlFor="email">Email</Label>
          <Input id="email" type="email" defaultValue="jane@example.com" />
        </div>
      </CardContent>
      <CardFooter className="justify-end gap-2">
        <Button variant="outline">Cancel</Button>
        <Button>Save changes</Button>
      </CardFooter>
    </Card>
  );
}

import {
  Card,
  CardDescription,
  CardHeader,
  CardTitle,
} from '@brika/clay/components/card';
/** Interactive card with hover lift, wrap in an anchor for full link behaviour. */
export default function CardInteractiveDemo() {
  return (
    <Card interactive className="w-72 cursor-pointer">
      <CardHeader>
        <CardTitle>Hover me</CardTitle>
        <CardDescription>Interactive cards lift on hover and can wrap any clickable element.</CardDescription>
      </CardHeader>
    </Card>
  );
}

import { Badge } from '@brika/clay/components/badge';
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from '@brika/clay/components/card';
/** Stats card showing a key metric with a trend indicator. */
export default function CardStatsDemo() {
  return (
    <Card className="w-64">
      <CardHeader>
        <CardDescription>Active users</CardDescription>
        <div className="flex items-end justify-between gap-2">
          <CardTitle className="text-3xl font-bold">2,847</CardTitle>
          <Badge variant="secondary" className="mb-0.5">+12% this week</Badge>
        </div>
      </CardHeader>
      <CardContent className="text-muted-foreground text-sm">
        Up from 2,541 last week
      </CardContent>
    </Card>
  );
}