{
  "name": "dashboard-02",
  "type": "registry:block",
  "registryDependencies": [
    "badge",
    "button",
    "card",
    "dropdown-menu",
    "input"
  ],
  "files": [
    {
      "path": "block/dashboard-02.tsx",
      "content": "import Link from \"next/link\"\nimport {\n  Bell,\n  CircleUser,\n  Home,\n  LineChart,\n  Menu,\n  Package,\n  Package2,\n  Search,\n  ShoppingCart,\n  Users,\n} from \"lucide-react\"\n\nimport { Badge } from \"@/registry/default/ui/badge\"\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/default/ui/dropdown-menu\"\nimport { Input } from \"@/registry/default/ui/input\"\nimport { Sheet, SheetContent, SheetTrigger } from \"@/registry/default/ui/sheet\"\n\nexport default function Dashboard() {\n  return (\n    <div className=\"grid min-h-screen w-full md:grid-cols-[220px_1fr] lg:grid-cols-[280px_1fr]\">\n      <div className=\"hidden border-r bg-muted/40 md:block\">\n        <div className=\"flex h-full max-h-screen flex-col gap-2\">\n          <div className=\"flex h-14 items-center border-b px-4 lg:h-[60px] lg:px-6\">\n            <Link href=\"/\" className=\"flex items-center gap-2 font-semibold\">\n              <Package2 className=\"h-6 w-6\" />\n              <span className=\"\">Acme Inc</span>\n            </Link>\n            <Button variant=\"outline\" size=\"icon\" className=\"ml-auto h-8 w-8\">\n              <Bell className=\"h-4 w-4\" />\n              <span className=\"sr-only\">Toggle notifications</span>\n            </Button>\n          </div>\n          <div className=\"flex-1\">\n            <nav className=\"grid items-start px-2 text-sm font-medium lg:px-4\">\n              <Link\n                href=\"#\"\n                className=\"flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary\"\n              >\n                <Home className=\"h-4 w-4\" />\n                Dashboard\n              </Link>\n              <Link\n                href=\"#\"\n                className=\"flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary\"\n              >\n                <ShoppingCart className=\"h-4 w-4\" />\n                Orders\n                <Badge className=\"ml-auto flex h-6 w-6 shrink-0 items-center justify-center rounded-full\">\n                  6\n                </Badge>\n              </Link>\n              <Link\n                href=\"#\"\n                className=\"flex items-center gap-3 rounded-lg bg-muted px-3 py-2 text-primary transition-all hover:text-primary\"\n              >\n                <Package className=\"h-4 w-4\" />\n                Products{\" \"}\n              </Link>\n              <Link\n                href=\"#\"\n                className=\"flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary\"\n              >\n                <Users className=\"h-4 w-4\" />\n                Customers\n              </Link>\n              <Link\n                href=\"#\"\n                className=\"flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary\"\n              >\n                <LineChart className=\"h-4 w-4\" />\n                Analytics\n              </Link>\n            </nav>\n          </div>\n          <div className=\"mt-auto p-4\">\n            <Card x-chunk=\"A card with a call to action\">\n              <CardHeader className=\"p-2 pt-0 md:p-4\">\n                <CardTitle>Upgrade to Pro</CardTitle>\n                <CardDescription>\n                  Unlock all features and get unlimited access to our support\n                  team.\n                </CardDescription>\n              </CardHeader>\n              <CardContent className=\"p-2 pt-0 md:p-4 md:pt-0\">\n                <Button size=\"sm\" className=\"w-full\">\n                  Upgrade\n                </Button>\n              </CardContent>\n            </Card>\n          </div>\n        </div>\n      </div>\n      <div className=\"flex flex-col\">\n        <header className=\"flex h-14 items-center gap-4 border-b bg-muted/40 px-4 lg:h-[60px] lg:px-6\">\n          <Sheet>\n            <SheetTrigger asChild>\n              <Button\n                variant=\"outline\"\n                size=\"icon\"\n                className=\"shrink-0 md:hidden\"\n              >\n                <Menu className=\"h-5 w-5\" />\n                <span className=\"sr-only\">Toggle navigation menu</span>\n              </Button>\n            </SheetTrigger>\n            <SheetContent side=\"left\" className=\"flex flex-col\">\n              <nav className=\"grid gap-2 text-lg font-medium\">\n                <Link\n                  href=\"#\"\n                  className=\"flex items-center gap-2 text-lg font-semibold\"\n                >\n                  <Package2 className=\"h-6 w-6\" />\n                  <span className=\"sr-only\">Acme Inc</span>\n                </Link>\n                <Link\n                  href=\"#\"\n                  className=\"mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 text-muted-foreground hover:text-foreground\"\n                >\n                  <Home className=\"h-5 w-5\" />\n                  Dashboard\n                </Link>\n                <Link\n                  href=\"#\"\n                  className=\"mx-[-0.65rem] flex items-center gap-4 rounded-xl bg-muted px-3 py-2 text-foreground hover:text-foreground\"\n                >\n                  <ShoppingCart className=\"h-5 w-5\" />\n                  Orders\n                  <Badge className=\"ml-auto flex h-6 w-6 shrink-0 items-center justify-center rounded-full\">\n                    6\n                  </Badge>\n                </Link>\n                <Link\n                  href=\"#\"\n                  className=\"mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 text-muted-foreground hover:text-foreground\"\n                >\n                  <Package className=\"h-5 w-5\" />\n                  Products\n                </Link>\n                <Link\n                  href=\"#\"\n                  className=\"mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 text-muted-foreground hover:text-foreground\"\n                >\n                  <Users className=\"h-5 w-5\" />\n                  Customers\n                </Link>\n                <Link\n                  href=\"#\"\n                  className=\"mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 text-muted-foreground hover:text-foreground\"\n                >\n                  <LineChart className=\"h-5 w-5\" />\n                  Analytics\n                </Link>\n              </nav>\n              <div className=\"mt-auto\">\n                <Card>\n                  <CardHeader>\n                    <CardTitle>Upgrade to Pro</CardTitle>\n                    <CardDescription>\n                      Unlock all features and get unlimited access to our\n                      support team.\n                    </CardDescription>\n                  </CardHeader>\n                  <CardContent>\n                    <Button size=\"sm\" className=\"w-full\">\n                      Upgrade\n                    </Button>\n                  </CardContent>\n                </Card>\n              </div>\n            </SheetContent>\n          </Sheet>\n          <div className=\"w-full flex-1\">\n            <form>\n              <div className=\"relative\">\n                <Search className=\"absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground\" />\n                <Input\n                  type=\"search\"\n                  placeholder=\"Search products...\"\n                  className=\"w-full appearance-none bg-background pl-8 shadow-none md:w-2/3 lg:w-1/3\"\n                />\n              </div>\n            </form>\n          </div>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"secondary\" size=\"icon\" className=\"rounded-full\">\n                <CircleUser className=\"h-5 w-5\" />\n                <span className=\"sr-only\">Toggle user menu</span>\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\">\n              <DropdownMenuLabel>My Account</DropdownMenuLabel>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem>Settings</DropdownMenuItem>\n              <DropdownMenuItem>Support</DropdownMenuItem>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem>Logout</DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </header>\n        <main className=\"flex flex-1 flex-col gap-4 p-4 lg:gap-6 lg:p-6\">\n          <div className=\"flex items-center\">\n            <h1 className=\"text-lg font-semibold md:text-2xl\">Inventory</h1>\n          </div>\n          <div\n            x-chunk=\"An empty state showing no products with a heading, description and a call to action to add a product.\"\n            className=\"flex flex-1 items-center justify-center rounded-lg border border-dashed shadow-sm\"\n          >\n            <div className=\"flex flex-col items-center gap-1 text-center\">\n              <h3 className=\"text-2xl font-bold tracking-tight\">\n                You have no products\n              </h3>\n              <p className=\"text-sm text-muted-foreground\">\n                You can start selling as soon as you add a product.\n              </p>\n              <Button className=\"mt-4\">Add Product</Button>\n            </div>\n          </div>\n        </main>\n      </div>\n    </div>\n  )\n}\n",
      "type": "registry:block",
      "target": ""
    }
  ]
}