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

2026-09-15 22:44:43 +05:00
commit 1416db152c
5727 changed files with 630238 additions and 0 deletions
--- a/apps/v4/components/cards/stats.tsx
+++ b/apps/v4/components/cards/stats.tsx
@@ -0,0 +1,132 @@
+"use client"
+
+import { Area, AreaChart, Line, LineChart } from "recharts"
+
+import { Button } from "@/registry/new-york-v4/ui/button"
+import {
+  Card,
+  CardAction,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york-v4/ui/card"
+import {
+  ChartContainer,
+  type ChartConfig,
+} from "@/registry/new-york-v4/ui/chart"
+
+const data = [
+  {
+    revenue: 10400,
+    subscription: 40,
+  },
+  {
+    revenue: 14405,
+    subscription: 90,
+  },
+  {
+    revenue: 9400,
+    subscription: 200,
+  },
+  {
+    revenue: 8200,
+    subscription: 278,
+  },
+  {
+    revenue: 7000,
+    subscription: 89,
+  },
+  {
+    revenue: 9600,
+    subscription: 239,
+  },
+  {
+    revenue: 11244,
+    subscription: 78,
+  },
+  {
+    revenue: 26475,
+    subscription: 89,
+  },
+]
+
+const chartConfig = {
+  revenue: {
+    label: "Revenue",
+    color: "var(--primary)",
+  },
+  subscription: {
+    label: "Subscriptions",
+    color: "var(--primary)",
+  },
+} satisfies ChartConfig
+
+export function CardsStats() {
+  return (
+    <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-1 xl:grid-cols-2">
+      <Card>
+        <CardHeader>
+          <CardDescription>Total Revenue</CardDescription>
+          <CardTitle className="text-3xl">$15,231.89</CardTitle>
+          <CardDescription>+20.1% from last month</CardDescription>
+        </CardHeader>
+        <CardContent className="pb-0">
+          <ChartContainer config={chartConfig} className="h-[80px] w-full">
+            <LineChart
+              data={data}
+              margin={{
+                top: 5,
+                right: 10,
+                left: 10,
+                bottom: 0,
+              }}
+            >
+              <Line
+                type="monotone"
+                strokeWidth={2}
+                dataKey="revenue"
+                stroke="var(--color-revenue)"
+                activeDot={{
+                  r: 6,
+                }}
+              />
+            </LineChart>
+          </ChartContainer>
+        </CardContent>
+      </Card>
+      <Card className="pb-0 lg:hidden xl:flex">
+        <CardHeader>
+          <CardDescription>Subscriptions</CardDescription>
+          <CardTitle className="text-3xl">+2,350</CardTitle>
+          <CardDescription>+180.1% from last month</CardDescription>
+          <CardAction>
+            <Button variant="ghost" size="sm">
+              View More
+            </Button>
+          </CardAction>
+        </CardHeader>
+        <CardContent className="mt-auto max-h-[124px] flex-1 p-0">
+          <ChartContainer config={chartConfig} className="size-full">
+            <AreaChart
+              data={data}
+              margin={{
+                left: 0,
+                right: 0,
+              }}
+            >
+              <Area
+                dataKey="subscription"
+                fill="var(--color-subscription)"
+                fillOpacity={0.05}
+                stroke="var(--color-subscription)"
+                strokeWidth={2}
+                type="monotone"
+              />
+            </AreaChart>
+          </ChartContainer>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}