Card

'use client';

import { Avatar, Badge, Button, Card } from '@akhatmirzo/ui';

export default function CardBasic() {
  return (
    <Card className="w-full max-w-md">
      <Card.Header
        title="Buyurtma #1042"
        description="Bugun, 14:20"
        action={
          <Badge color="primary" dot>
            Yangi
          </Badge>
        }
      />
      <Card.Body>
        <div className="flex items-center gap-3">
          <Avatar name="Sarvar Abduxoliqov" size="sm" />
          <div className="flex flex-col">
            <span className="font-medium">Sarvar Abduxoliqov</span>
            <span className="text-text-muted">3 ta mahsulot · 245 000 so'm</span>
          </div>
        </div>
      </Card.Body>
      <Card.Footer className="justify-end">
        <Button variant="ghost">Bekor qilish</Button>
        <Button variant="primary">Tasdiqlash</Button>
      </Card.Footer>
    </Card>
  );
}

'use client';

import { Card } from '@akhatmirzo/ui';

export default function CardVariants() {
  return (
    <div className="grid w-full grid-cols-1 gap-4 sm:grid-cols-3">
      <Card variant="elevated" padding="sm">
        <Card.Header title="Elevated" description="Soya va chegara (standart)" />
      </Card>
      <Card variant="outline" padding="sm">
        <Card.Header title="Outline" description="Faqat chegara" />
      </Card>
      <Card variant="soft" padding="sm">
        <Card.Header title="Soft" description="Och kulrang fon" />
      </Card>
    </div>
  );
}

'use client';

import { Card } from '@akhatmirzo/ui';

const paddings = [
  { padding: 'sm', px: 16 },
  { padding: 'md', px: 24 },
  { padding: 'lg', px: 32 },
] as const;

export default function CardPadding() {
  return (
    <div className="grid w-full grid-cols-1 gap-4 sm:grid-cols-3">
      {paddings.map(({ padding, px }) => (
        <Card key={padding} variant="outline" padding={padding}>
          <div className="rounded-md bg-primary-soft p-2 text-xs font-medium text-primary-soft-foreground">
            {padding} · {px}px
          </div>
        </Card>
      ))}
    </div>
  );
}

'use client';

import { Badge, Card } from '@akhatmirzo/ui';

export default function CardMedia() {
  return (
    <Card padding="none" className="w-full max-w-sm overflow-hidden">
      <div className="h-32 bg-linear-to-br from-primary to-info" />
      <div className="flex flex-col gap-3 p-6">
        <Card.Header title="Samarqand bo'ylab sayohat" description="2 kun · 4 ta joy" />
        <Card.Footer>
          <Badge color="success" size="sm">
            Joy bor
          </Badge>
          <Badge size="sm">Guruh</Badge>
        </Card.Footer>
      </div>
    </Card>
  );
}

'use client';

import { Card } from '@akhatmirzo/ui';

const reports = [
  { title: 'Sotuvlar', description: "Oktyabr · 48 250 000 so'm" },
  { title: 'Mijozlar', description: '1 204 ta faol mijoz' },
];

export default function CardInteractive() {
  return (
    <div className="grid w-full grid-cols-1 gap-4 sm:grid-cols-2">
      {reports.map((report) => (
        <Card key={report.title} variant="outline" interactive asChild>
          <a href="#props">
            <Card.Header title={report.title} description={report.description} />
          </a>
        </Card>
      ))}
    </div>
  );
}