import { ArrowRightIcon, ChartLineUpIcon, EnvelopeSimpleIcon, PaperPlaneTiltIcon } from "@phosphor-icons/react/dist/ssr";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
import { Input } from "@/components/ui/input";

export default function CardDemo() {
  return (
    <div className="flex w-full flex-wrap items-start justify-center gap-6">
      <Card className="w-full max-w-sm">
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <EnvelopeSimpleIcon weight="bold" className="size-5 shrink-0" /> Join the waitlist
          </CardTitle>
          <CardDescription>We will ping you when it ships.</CardDescription>
        </CardHeader>
        <CardContent>
          <Input placeholder="you@parlemen.dev" />
        </CardContent>
        <CardFooter>
          <Button className="w-full">
            <PaperPlaneTiltIcon weight="bold" /> Count me in
          </Button>
        </CardFooter>
      </Card>
      <Card className="w-full max-w-xs">
        <CardHeader className="flex-row items-center gap-4">
          <div className="grid size-12 shrink-0 place-items-center rounded-xl bg-success-container text-on-success-container shadow-clay-sm">
            <ChartLineUpIcon weight="duotone" className="size-7" />
          </div>
          <div>
            <CardDescription>Kehadiran sidang</CardDescription>
            <CardTitle className="text-3xl">92%</CardTitle>
          </div>
        </CardHeader>
        <CardFooter>
          <Button variant="soft" color="neutral" size="sm">
            Lihat detail <ArrowRightIcon weight="bold" />
          </Button>
        </CardFooter>
      </Card>
    </div>
  );
}
Join the waitlist

92%

Installation

Join the waitlist

92%
