{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "dashboard-shell-01",
  "title": "Dashboard Shell",
  "description": "A responsive application shell with navigation, metrics and recent projects.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "@rivelle/utils",
    "@rivelle/avatar",
    "@rivelle/badge",
    "@rivelle/button",
    "@rivelle/card",
    "@rivelle/input",
    "@rivelle/progress"
  ],
  "files": [
    {
      "path": "registry/nova/blocks/dashboard-shell-01.tsx",
      "content": "import * as React from \"react\";\nimport {\n  Activity,\n  ArrowUpRight,\n  Bell,\n  Blocks,\n  ChartNoAxesCombined,\n  CreditCard,\n  Home,\n  Search,\n  Settings,\n  Sparkles,\n  Users,\n} from \"lucide-react\";\n\nimport { Avatar, AvatarFallback } from \"@/components/ui/avatar\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { Button } from \"@/components/ui/button\";\nimport { Card, CardContent, CardHeader, CardTitle } from \"@/components/ui/card\";\nimport { Input } from \"@/components/ui/input\";\nimport { Progress } from \"@/components/ui/progress\";\nimport { cn } from \"@/lib/utils\";\n\nfunction DashboardShell01({\n  className,\n  ...props\n}: React.ComponentProps<\"section\">) {\n  return (\n    <section\n      className={cn(\n        \"grid min-h-[720px] overflow-hidden rounded-[2rem] border border-foreground/10 bg-background lg:grid-cols-[220px_1fr]\",\n        className,\n      )}\n      {...props}\n    >\n      <aside className=\"hidden border-r border-foreground/8 bg-foreground/[.02] p-4 lg:flex lg:flex-col\">\n        <div className=\"flex items-center gap-2 px-2 py-2 font-semibold\">\n          <span className=\"grid size-8 place-items-center rounded-xl bg-primary text-primary-foreground\">\n            <Sparkles className=\"size-4\" />\n          </span>\n          Rivelle\n        </div>\n        <nav className=\"mt-7 space-y-1\">\n          {[\n            [Home, \"Overview\"],\n            [Blocks, \"Projects\"],\n            [ChartNoAxesCombined, \"Analytics\"],\n            [Users, \"Team\"],\n            [CreditCard, \"Billing\"],\n          ].map(([Icon, label], index) => (\n            <a\n              className={cn(\n                \"flex items-center gap-3 rounded-xl px-3 py-2.5 text-sm font-medium text-muted-foreground\",\n                index === 0 && \"bg-primary/10 text-primary\",\n              )}\n              href=\"#\"\n              key={String(label)}\n            >\n              {React.createElement(\n                Icon as React.ComponentType<{ className?: string }>,\n                { className: \"size-4\" },\n              )}\n              {String(label)}\n            </a>\n          ))}\n        </nav>\n        <a\n          className=\"mt-auto flex items-center gap-3 rounded-xl px-3 py-2.5 text-sm font-medium text-muted-foreground\"\n          href=\"#\"\n        >\n          <Settings className=\"size-4\" />\n          Settings\n        </a>\n      </aside>\n      <div className=\"min-w-0\">\n        <header className=\"flex h-16 items-center gap-3 border-b border-foreground/8 px-5\">\n          <div className=\"relative hidden max-w-xs flex-1 sm:block\">\n            <Search className=\"absolute left-3 top-1/2 size-3.5 -translate-y-1/2 text-muted-foreground\" />\n            <Input className=\"h-9 pl-9\" placeholder=\"Search projects\" />\n          </div>\n          <Button className=\"ml-auto\" size=\"sm\">\n            New project\n          </Button>\n          <Button aria-label=\"Notifications\" size=\"icon-sm\" variant=\"ghost\">\n            <Bell />\n          </Button>\n          <Avatar className=\"size-8\">\n            <AvatarFallback>MC</AvatarFallback>\n          </Avatar>\n        </header>\n        <main className=\"p-5 sm:p-7\">\n          <div className=\"flex flex-col justify-between gap-4 sm:flex-row sm:items-end\">\n            <div>\n              <p className=\"text-sm text-muted-foreground\">\n                Wednesday, July 16\n              </p>\n              <h1 className=\"mt-1 text-3xl font-semibold tracking-[-.04em]\">\n                Good morning, Maya.\n              </h1>\n            </div>\n            <Badge variant=\"success\">\n              <Activity /> All systems operational\n            </Badge>\n          </div>\n          <div className=\"mt-7 grid gap-4 sm:grid-cols-3\">\n            {[\n              [\"Active projects\", \"12\", \"+3 this month\"],\n              [\"Team members\", \"24\", \"4 online now\"],\n              [\"Monthly usage\", \"72%\", \"7.2 GB of 10 GB\"],\n            ].map(([label, value, meta]) => (\n              <Card key={label}>\n                <CardHeader>\n                  <CardTitle className=\"text-sm text-muted-foreground\">\n                    {label}\n                  </CardTitle>\n                </CardHeader>\n                <CardContent>\n                  <div className=\"text-3xl font-semibold tracking-[-.04em]\">\n                    {value}\n                  </div>\n                  <p className=\"mt-2 text-xs text-muted-foreground\">{meta}</p>\n                  {value === \"72%\" && <Progress className=\"mt-3\" value={72} />}\n                </CardContent>\n              </Card>\n            ))}\n          </div>\n          <Card className=\"mt-5\">\n            <CardHeader className=\"flex-row items-center justify-between\">\n              <div>\n                <CardTitle>Recent projects</CardTitle>\n                <p className=\"mt-1 text-xs text-muted-foreground\">\n                  Your team’s latest work.\n                </p>\n              </div>\n              <Button size=\"sm\" variant=\"ghost\">\n                View all <ArrowUpRight />\n              </Button>\n            </CardHeader>\n            <CardContent className=\"space-y-1\">\n              {[\n                [\"Atlas Dashboard\", \"Product design\", \"Live\"],\n                [\"Northstar Mobile\", \"Engineering\", \"Review\"],\n                [\"Rivelle Docs\", \"Design system\", \"Draft\"],\n              ].map(([name, team, status]) => (\n                <div\n                  className=\"flex items-center gap-4 rounded-xl px-3 py-3 hover:bg-foreground/[.035]\"\n                  key={name}\n                >\n                  <span className=\"grid size-9 place-items-center rounded-xl bg-primary/10 text-primary\">\n                    <Blocks className=\"size-4\" />\n                  </span>\n                  <div className=\"min-w-0 flex-1\">\n                    <p className=\"truncate text-sm font-semibold\">{name}</p>\n                    <p className=\"text-xs text-muted-foreground\">{team}</p>\n                  </div>\n                  <Badge variant={status === \"Live\" ? \"success\" : \"secondary\"}>\n                    {status}\n                  </Badge>\n                </div>\n              ))}\n            </CardContent>\n          </Card>\n        </main>\n      </div>\n    </section>\n  );\n}\n\nexport { DashboardShell01 };\n",
      "type": "registry:block"
    }
  ],
  "type": "registry:block"
}