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/registry/bases/base/blocks/preview/cards/bar-chart-card.tsx
+++ b/apps/v4/registry/bases/base/blocks/preview/cards/bar-chart-card.tsx
@@ -0,0 +1,133 @@
+"use client"
+
+import * as React from "react"
+import { Bar, BarChart, CartesianGrid, XAxis } from "recharts"
+
+import { Button } from "@/registry/bases/base/ui/button"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/bases/base/ui/card"
+import {
+  ChartContainer,
+  ChartLegend,
+  ChartLegendContent,
+  ChartTooltip,
+  ChartTooltipContent,
+  type ChartConfig,
+} from "@/registry/bases/base/ui/chart"
+import { useDesignSystemSearchParams } from "@/app/(app)/create/lib/search-params"
+
+const barChartData = [
+  { month: "January", desktop: 186, mobile: 80 },
+  { month: "February", desktop: 305, mobile: 200 },
+  { month: "March", desktop: 237, mobile: 120 },
+  { month: "April", desktop: 73, mobile: 190 },
+  { month: "May", desktop: 209, mobile: 130 },
+  { month: "June", desktop: 214, mobile: 140 },
+]
+
+const barChartConfig = {
+  desktop: {
+    label: "Desktop",
+    color: "var(--chart-1)",
+  },
+  mobile: {
+    label: "Mobile",
+    color: "var(--chart-2)",
+  },
+} satisfies ChartConfig
+
+const desktopTotal = barChartData.reduce((sum, item) => sum + item.desktop, 0)
+const mobileTotal = barChartData.reduce((sum, item) => sum + item.mobile, 0)
+const desktopDelta = Math.round(
+  ((desktopTotal - mobileTotal) / mobileTotal) * 100
+)
+const desktopDeltaPrefix = desktopDelta > 0 ? "+" : ""
+
+export function BarChartCard() {
+  const [params] = useDesignSystemSearchParams()
+  const isRounded = !["lyra", "sera"].includes(params.style)
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="text-lg">Traffic channels</CardTitle>
+        <CardDescription className="line-clamp-2 text-sm leading-snug">
+          Monthly desktop and mobile traffic for the last six months—compare
+          volume and mix across platforms and devices at a glance.
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="flex flex-col gap-4 pt-0">
+        <ChartContainer
+          config={barChartConfig}
+          className="max-h-[180px] w-full"
+        >
+          <BarChart
+            accessibilityLayer
+            data={barChartData}
+            margin={{ left: 0, right: 0, top: 8, bottom: 0 }}
+          >
+            <CartesianGrid vertical={false} strokeDasharray="3 3" />
+            <XAxis
+              dataKey="month"
+              tickLine={false}
+              tickMargin={8}
+              axisLine={false}
+              tickFormatter={(value) => String(value).slice(0, 3)}
+            />
+            <ChartTooltip
+              cursor={false}
+              content={<ChartTooltipContent indicator="dashed" />}
+            />
+            <ChartLegend content={<ChartLegendContent />} />
+            <Bar
+              dataKey="desktop"
+              fill="var(--color-desktop)"
+              radius={isRounded ? [6, 6, 0, 0] : 0}
+            />
+            <Bar
+              dataKey="mobile"
+              fill="var(--color-mobile)"
+              radius={isRounded ? [6, 6, 0, 0] : 0}
+            />
+          </BarChart>
+        </ChartContainer>
+        <div className="grid w-full grid-cols-3 divide-x divide-border/60">
+          <div className="px-2 text-center">
+            <div className="text-[0.65rem] text-muted-foreground uppercase">
+              Desktop
+            </div>
+            <div className="text-sm font-medium tabular-nums">
+              {desktopTotal.toLocaleString()}
+            </div>
+          </div>
+          <div className="px-2 text-center">
+            <div className="text-[0.65rem] text-muted-foreground uppercase">
+              Mobile
+            </div>
+            <div className="text-sm font-medium tabular-nums">
+              {mobileTotal.toLocaleString()}
+            </div>
+          </div>
+          <div className="px-2 text-center">
+            <div className="text-[0.65rem] text-muted-foreground uppercase">
+              Mix Delta
+            </div>
+            <div className="text-sm font-medium tabular-nums">
+              {desktopDeltaPrefix}
+              {desktopDelta}%
+            </div>
+          </div>
+        </div>
+      </CardContent>
+      <CardFooter>
+        <Button className="w-full">View report</Button>
+      </CardFooter>
+    </Card>
+  )
+}