{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "dashboard-1",
  "description": "An analytics dashboard with stat cards and a bar chart.",
  "dependencies": [
    "@remixicon/react",
    "recharts",
    "@base-ui/react"
  ],
  "registryDependencies": [
    "badge",
    "card",
    "chart",
    "select"
  ],
  "files": [
    {
      "path": "registry/blocks/dashboard/1/dashboard-block.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  RiArrowRightLine,\n  RiArrowRightUpLine,\n  RiArrowRightDownLine,\n} from \"@remixicon/react\"\nimport { Bar, BarChart, CartesianGrid, LabelList, XAxis } from \"recharts\"\n\nimport { Badge } from \"@/components/ui/badge\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/components/ui/chart\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/components/ui/select\"\n\ntype Range = \"7d\" | \"30d\" | \"90d\" | \"12m\"\n\nconst RANGES: { value: Range; label: string }[] = [\n  { value: \"7d\", label: \"Last 7 Days\" },\n  { value: \"30d\", label: \"Last 30 Days\" },\n  { value: \"90d\", label: \"Last 90 Days\" },\n  { value: \"12m\", label: \"Last 12 Months\" },\n]\n\nconst STATS_BY_RANGE: Record<\n  Range,\n  { label: string; value: string; delta: string; up: boolean }[]\n> = {\n  \"7d\": [\n    { label: \"Revenue\", value: \"$11.4k\", delta: \"+3.1%\", up: true },\n    { label: \"Active Users\", value: \"2,140\", delta: \"+1.2%\", up: true },\n    { label: \"Conversion\", value: \"3.31%\", delta: \"+0.2%\", up: true },\n    { label: \"Avg. Session\", value: \"4m 02s\", delta: \"-0.4%\", up: false },\n  ],\n  \"30d\": [\n    { label: \"Revenue\", value: \"$48.2k\", delta: \"+12.5%\", up: true },\n    { label: \"Active Users\", value: \"8,941\", delta: \"+4.3%\", up: true },\n    { label: \"Conversion\", value: \"3.24%\", delta: \"-0.8%\", up: false },\n    { label: \"Avg. Session\", value: \"4m 12s\", delta: \"+1.1%\", up: true },\n  ],\n  \"90d\": [\n    { label: \"Revenue\", value: \"$142.7k\", delta: \"+9.8%\", up: true },\n    { label: \"Active Users\", value: \"26,304\", delta: \"+7.6%\", up: true },\n    { label: \"Conversion\", value: \"3.18%\", delta: \"-1.4%\", up: false },\n    { label: \"Avg. Session\", value: \"4m 26s\", delta: \"+2.3%\", up: true },\n  ],\n  \"12m\": [\n    { label: \"Revenue\", value: \"$571.0k\", delta: \"+22.1%\", up: true },\n    { label: \"Active Users\", value: \"98,612\", delta: \"+18.4%\", up: true },\n    { label: \"Conversion\", value: \"3.02%\", delta: \"-2.9%\", up: false },\n    { label: \"Avg. Session\", value: \"4m 41s\", delta: \"+5.0%\", up: true },\n  ],\n}\n\nconst chartData = [\n  { month: \"Jan\", sessions: 1840 },\n  { month: \"Feb\", sessions: 2120 },\n  { month: \"Mar\", sessions: 1760 },\n  { month: \"Apr\", sessions: 2580 },\n  { month: \"May\", sessions: 2340 },\n  { month: \"Jun\", sessions: 3120 },\n  { month: \"Jul\", sessions: 2210 },\n  { month: \"Aug\", sessions: 2860 },\n  { month: \"Sep\", sessions: 2480 },\n  { month: \"Oct\", sessions: 3340 },\n  { month: \"Nov\", sessions: 2720 },\n  { month: \"Dec\", sessions: 3010 },\n]\n\nconst chartConfig = {\n  sessions: { label: \"Sessions\", color: \"var(--primary)\" },\n} satisfies ChartConfig\n\nexport default function DashboardBlock() {\n  const [range, setRange] = React.useState<Range>(\"30d\")\n  const stats = STATS_BY_RANGE[range]\n\n  return (\n    <section className=\"flex min-h-svh w-full items-stretch justify-center bg-background px-6 py-12 text-foreground\">\n      <div className=\"mx-auto w-full max-w-5xl\">\n        <div className=\"flex items-center justify-between gap-4\">\n          <h1 className=\"text-2xl font-bold tracking-tight\">Overview</h1>\n          <Select\n            items={RANGES}\n            value={range}\n            onValueChange={(value) => setRange(value as Range)}\n          >\n            <SelectTrigger aria-label=\"Date range\">\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              {RANGES.map((r) => (\n                <SelectItem key={r.value} value={r.value}>\n                  {r.label}\n                </SelectItem>\n              ))}\n            </SelectContent>\n          </Select>\n        </div>\n\n        <div className=\"mt-6 grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-4\">\n          {stats.map((stat) => (\n            <Card key={stat.label}>\n              <CardHeader>\n                <CardDescription>{stat.label}</CardDescription>\n                <CardTitle className=\"text-3xl font-bold tracking-tight\">\n                  {stat.value}\n                </CardTitle>\n              </CardHeader>\n              <CardContent className=\"flex items-center gap-2\">\n                <Badge variant={stat.up ? \"secondary\" : \"destructive\"}>\n                  {stat.up ? (\n                    <RiArrowRightUpLine\n                      data-icon=\"inline-start\"\n                      aria-hidden=\"true\"\n                    />\n                  ) : (\n                    <RiArrowRightDownLine\n                      data-icon=\"inline-start\"\n                      aria-hidden=\"true\"\n                    />\n                  )}\n                  {stat.delta}\n                </Badge>\n                <span className=\"text-xs text-muted-foreground\">\n                  Vs Last Period\n                </span>\n              </CardContent>\n            </Card>\n          ))}\n        </div>\n\n        <Card className=\"mt-4\">\n          <CardHeader>\n            <CardTitle>Monthly traffic</CardTitle>\n            <CardDescription>Sessions over the last 12 months</CardDescription>\n            <CardAction>\n              <a\n                href=\"#\"\n                className=\"flex items-center gap-1 text-sm font-medium text-muted-foreground\"\n              >\n                View Report\n                <RiArrowRightLine className=\"size-4\" aria-hidden=\"true\" />\n              </a>\n            </CardAction>\n          </CardHeader>\n          <CardContent>\n            <ChartContainer\n              config={chartConfig}\n              className=\"h-48 w-full [&_.recharts-surface:focus-visible]:outline-2 [&_.recharts-surface:focus-visible]:outline-offset-2 [&_.recharts-surface:focus-visible]:outline-ring [&_.recharts-surface:focus-visible]:outline-solid\"\n            >\n              <BarChart\n                aria-label=\"Sessions by month\"\n                accessibilityLayer\n                data={chartData}\n                margin={{ top: 24 }}\n              >\n                <CartesianGrid vertical={false} />\n                <XAxis\n                  dataKey=\"month\"\n                  tickLine={false}\n                  axisLine={false}\n                  tickMargin={8}\n                />\n                <ChartTooltip\n                  cursor={false}\n                  content={<ChartTooltipContent />}\n                />\n                <Bar\n                  dataKey=\"sessions\"\n                  fill=\"var(--color-sessions)\"\n                  maxBarSize={48}\n                >\n                  <LabelList\n                    dataKey=\"sessions\"\n                    position=\"top\"\n                    offset={8}\n                    className=\"fill-muted-foreground\"\n                    fontSize={11}\n                    formatter={(value) =>\n                      (Number(value) / 1000).toFixed(1) + \"k\"\n                    }\n                  />\n                </Bar>\n              </BarChart>\n            </ChartContainer>\n          </CardContent>\n        </Card>\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:component"
    }
  ],
  "meta": {
    "height": "90vh",
    "tier": "free"
  },
  "categories": [
    "dashboard"
  ],
  "type": "registry:block"
}