Stats

  
  import type React from "react";
  import {
    Card,   
    CardContent,
    CardHeader,
    CardTitle,
  } from "@/components/ui/card";
  import { Delta, DeltaIcon, DeltaValue } from "@/components/ui/delta";

  type Stat = {
    label: string;
    value: string;
    delta: number;
  };

  const stats = [
    { label: "Active users",    value: "847",     delta: 3.1 },
    { label: "Revenue",         value: "$18,290", delta: 12.4 },
    { label: "Conversion Rate", value: "3.28%",   delta: -0.4 },
  ] as const;

  export function DashboardStats() {
    return (
      <>
        {stats.map((s) => (
          <StatCard key={s.label} stat={s} />
        ))}
      </>
    );
  }

  import { clsx, type ClassValue } from "clsx";
  import { twMerge } from "tailwind-merge";
  
  function cn(...inputs: ClassValue[]) {
    return twMerge(clsx(inputs));
  }
  function StatCard({
    stat,
    className,
    ...props
  }: React.ComponentProps<typeof Card> & { stat: Stat }) {
    const { label, value, delta } = stat;
    return (
      <Card
        className={cn(
          "rounded-none bg-background shadow-none ring-0 gap-1 py-4",
          className
        )}  
        {...props}
      >
        <CardHeader className="flex flex-row items-baseline justify-between gap-2 px-4 pb-0">
          <CardTitle className="font-normal text-muted-foreground text-xs tracking-wide truncate">
            {label}
          </CardTitle>
          <Delta value={delta} className="text-xs shrink-0">
            <DeltaIcon />
            <DeltaValue />
          </Delta>
        </CardHeader>
        <CardContent className="flex flex-row items-center gap-2 px-4 pt-0">
          <p className="font-medium text-xl tabular-nums">{value}</p>
        </CardContent>
      </Card>
    );
  }

  export default DashboardStats;