{
  "name": "Dashboard04",
  "type": "registry:block",
  "dependencies": [],
  "registryDependencies": [
    "button",
    "card",
    "checkbox",
    "dropdown-menu",
    "input",
    "sheet"
  ],
  "files": [
    {
      "path": "block/Dashboard04.vue",
      "content": "<script lang=\"ts\">\nexport const description = 'A settings page. The settings page has a sidebar navigation and a main content area. The main content area has a form to update the store name and a form to update the plugins directory. The sidebar navigation has links to general, security, integrations, support, organizations, and advanced settings.'\nexport const iframeHeight = '780px'\nexport const containerClass = 'w-full h-full'\n</script>\n\n<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\n\nimport { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/registry/default/ui/card'\nimport { Checkbox } from '@/registry/default/ui/checkbox'\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/registry/default/ui/dropdown-menu'\nimport { Input } from '@/registry/default/ui/input'\nimport { Sheet, SheetContent, SheetTrigger } from '@/registry/default/ui/sheet'\nimport { CircleUser, Menu, Package2, Search } from 'lucide-vue-next'\n</script>\n\n<template>\n  <div class=\"flex min-h-screen w-full flex-col\">\n    <header class=\"sticky top-0 flex h-16 items-center gap-4 border-b bg-background px-4 md:px-6\">\n      <nav class=\"hidden flex-col gap-6 text-lg font-medium md:flex md:flex-row md:items-center md:gap-5 md:text-sm lg:gap-6\">\n        <a\n          href=\"#\"\n          class=\"flex items-center gap-2 text-lg font-semibold md:text-base\"\n        >\n          <Package2 class=\"h-6 w-6\" />\n          <span class=\"sr-only\">Acme Inc</span>\n        </a>\n        <a\n          href=\"#\"\n          class=\"text-muted-foreground transition-colors hover:text-foreground\"\n        >\n          Dashboard\n        </a>\n        <a\n          href=\"#\"\n          class=\"text-muted-foreground transition-colors hover:text-foreground\"\n        >\n          Orders\n        </a>\n        <a\n          href=\"#\"\n          class=\"text-muted-foreground transition-colors hover:text-foreground\"\n        >\n          Products\n        </a>\n        <a\n          href=\"#\"\n          class=\"text-muted-foreground transition-colors hover:text-foreground\"\n        >\n          Customers\n        </a>\n        <a\n          href=\"#\"\n          class=\"text-foreground transition-colors hover:text-foreground\"\n        >\n          Settings\n        </a>\n      </nav>\n      <Sheet>\n        <SheetTrigger as-child>\n          <Button\n            variant=\"outline\"\n            size=\"icon\"\n            class=\"shrink-0 md:hidden\"\n          >\n            <Menu class=\"h-5 w-5\" />\n            <span class=\"sr-only\">Toggle navigation menu</span>\n          </Button>\n        </SheetTrigger>\n        <SheetContent side=\"left\">\n          <nav class=\"grid gap-6 text-lg font-medium\">\n            <a\n              href=\"#\"\n              class=\"flex items-center gap-2 text-lg font-semibold\"\n            >\n              <Package2 class=\"h-6 w-6\" />\n              <span class=\"sr-only\">Acme Inc</span>\n            </a>\n            <a\n              href=\"#\"\n              class=\"text-muted-foreground hover:text-foreground\"\n            >\n              Dashboard\n            </a>\n            <a\n              href=\"#\"\n              class=\"text-muted-foreground hover:text-foreground\"\n            >\n              Orders\n            </a>\n            <a\n              href=\"#\"\n              class=\"text-muted-foreground hover:text-foreground\"\n            >\n              Products\n            </a>\n            <a\n              href=\"#\"\n              class=\"text-muted-foreground hover:text-foreground\"\n            >\n              Customers\n            </a>\n            <a href=\"#\" class=\"hover:text-foreground\">\n              Settings\n            </a>\n          </nav>\n        </SheetContent>\n      </Sheet>\n      <div class=\"flex w-full items-center gap-4 md:ml-auto md:gap-2 lg:gap-4\">\n        <form class=\"ml-auto flex-1 sm:flex-initial\">\n          <div class=\"relative\">\n            <Search class=\"absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground\" />\n            <Input\n              type=\"search\"\n              placeholder=\"Search products...\"\n              class=\"pl-8 sm:w-[300px] md:w-[200px] lg:w-[300px]\"\n            />\n          </div>\n        </form>\n        <DropdownMenu>\n          <DropdownMenuTrigger as-child>\n            <Button variant=\"secondary\" size=\"icon\" class=\"rounded-full\">\n              <CircleUser class=\"h-5 w-5\" />\n              <span class=\"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      </div>\n    </header>\n    <main class=\"flex min-h-[calc(100vh_-_theme(spacing.16))] flex-1 flex-col gap-4 bg-muted/40 p-4 md:gap-8 md:p-10\">\n      <div class=\"mx-auto grid w-full max-w-6xl gap-2\">\n        <h1 class=\"text-3xl font-semibold\">\n          Settings\n        </h1>\n      </div>\n      <div class=\"mx-auto grid w-full max-w-6xl items-start gap-6 md:grid-cols-[180px_1fr] lg:grid-cols-[250px_1fr]\">\n        <nav class=\"grid gap-4 text-sm text-muted-foreground\">\n          <a href=\"#\" class=\"font-semibold text-primary\">\n            General\n          </a>\n          <a href=\"#\">\n            Security\n          </a>\n          <a href=\"#\">\n            Integrations\n          </a>\n          <a href=\"#\">\n            Support\n          </a>\n          <a href=\"#\">\n            Organizations\n          </a>\n          <a href=\"#\">\n            Advanced\n          </a>\n        </nav>\n        <div class=\"grid gap-6\">\n          <Card>\n            <CardHeader>\n              <CardTitle>Store Name</CardTitle>\n              <CardDescription>\n                Used to identify your store in the marketplace.\n              </CardDescription>\n            </CardHeader>\n            <CardContent>\n              <form>\n                <Input placeholder=\"Store Name\" />\n              </form>\n            </CardContent>\n            <CardFooter class=\"border-t px-6 py-4\">\n              <Button>Save</Button>\n            </CardFooter>\n          </Card>\n          <Card>\n            <CardHeader>\n              <CardTitle>Plugins Directory</CardTitle>\n              <CardDescription>\n                The directory within your project, in which your plugins are\n                located.\n              </CardDescription>\n            </CardHeader>\n            <CardContent>\n              <form class=\"flex flex-col gap-4\">\n                <Input\n                  placeholder=\"Project Name\"\n                  default-value=\"/content/plugins\"\n                />\n                <div class=\"flex items-center space-x-2\">\n                  <Checkbox id=\"include\" default-checked />\n                  <label\n                    for=\"include\"\n                    class=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n                  >\n                    Allow administrators to change the directory.\n                  </label>\n                </div>\n              </form>\n            </CardContent>\n            <CardFooter class=\"border-t px-6 py-4\">\n              <Button>Save</Button>\n            </CardFooter>\n          </Card>\n        </div>\n      </div>\n    </main>\n  </div>\n</template>\n",
      "type": "registry:block",
      "target": "Dashboard04.vue"
    }
  ]
}