snapshot of https://github.com/shadcn-ui/ui.git (main, 2026-09-15; blobs > 131072B omitted)

apps/v4/app/(app)/(styles)/sera/audience-analytics/components/metrics-grid.tsx

@@ -0,0 +1,93 @@
+import { cn } from "cn"
+import { TrendingDownIcon, TrendingUpIcon } from "lucide-react"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/styles/base-sera/ui/card"
+
+type Metric = {
+  label: string
+  value: string
+  comparison: string
+  change: string
+  trend: "up" | "down"
+}
+
+const METRIC_CARDS: Metric[] = [
+  {
+    label: "Total visitors",
+    value: "248.5k",
+    comparison: "12.4%",
+    change: "vs last period",
+    trend: "up",
+  },
+  {
+    label: "Unique readers",
+    value: "182.1k",
+    comparison: "8.7%",
+    change: "vs last period",
+    trend: "up",
+  },
+  {
+    label: "Avg. time on page",
+    value: "3m 42s",
+    comparison: "1.2%",
+    change: "vs last period",
+    trend: "down",
+  },
+  {
+    label: "Bounce rate",
+    value: "42.8%",
+    comparison: "3.5%",
+    change: "vs last period",
+    trend: "down",
+  },
+]
+
+export function MetricsGrid() {
+  return (
+    <>
+      {METRIC_CARDS.map((metric) => (
+        <MetricCard
+          key={metric.label}
+          metric={metric}
+          className="col-span-full md:col-span-6 lg:col-span-3"
+        />
+      ))}
+    </>
+  )
+}
+
+function MetricCard({
+  metric,
+  className,
+}: {
+  metric: Metric
+  className: string
+}) {
+  return (
+    <Card className={cn("gap-0", className)}>
+      <CardContent className="flex flex-col gap-2">
+        <CardDescription className="text-xs uppercase">
+          {metric.label}
+        </CardDescription>
+        <CardTitle className="text-5xl tracking-tight lowercase">
+          {metric.value}
+        </CardTitle>
+        <CardDescription>
+          {metric.trend === "up" ? (
+            <TrendingUpIcon className="inline-block size-2.5 text-muted-foreground" />
+          ) : (
+            <TrendingDownIcon className="inline-block size-2.5 text-muted-foreground" />
+          )}{" "}
+          <span className="text-foreground">{metric.comparison}</span>{" "}
+          <span>{metric.change}</span>
+        </CardDescription>
+      </CardContent>
+    </Card>
+  )
+}