{
  "name": "sidebar-11",
  "type": "registry:block",
  "dependencies": [
    "@lucide/vue"
  ],
  "registryDependencies": [
    "breadcrumb",
    "collapsible",
    "separator",
    "sidebar"
  ],
  "files": [
    {
      "path": "blocks/sidebar-11/components/AppSidebar.vue",
      "type": "registry:file",
      "target": "blocks/sidebar-11/components/AppSidebar.vue",
      "content": "<script setup lang=\"ts\">\nimport type { SidebarProps } from \"@/components/ui/sidebar\"\nimport { File } from \"@lucide/vue\"\nimport Tree from \"../components/Tree.vue\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarRail,\n} from \"@/components/ui/sidebar\"\n\nconst props = defineProps<SidebarProps>()\n\n// This is sample data.\nconst data = {\n  changes: [\n    {\n      file: \"README.md\",\n      state: \"M\",\n    },\n    {\n      file: \"api/hello/route.ts\",\n      state: \"U\",\n    },\n    {\n      file: \"app/layout.tsx\",\n      state: \"M\",\n    },\n  ],\n  tree: [\n    [\n      \"app\",\n      [\n        \"api\",\n        [\"hello\", [\"route.ts\"]],\n        \"page.tsx\",\n        \"layout.tsx\",\n        [\"blog\", [\"page.tsx\"]],\n      ],\n    ],\n    [\n      \"components\",\n      [\"ui\", \"button.tsx\", \"card.tsx\"],\n      \"header.tsx\",\n      \"footer.tsx\",\n    ],\n    [\"lib\", [\"util.ts\"]],\n    [\"public\", \"favicon.ico\", \"vercel.svg\"],\n    \".eslintrc.json\",\n    \".gitignore\",\n    \"next.config.js\",\n    \"tailwind.config.js\",\n    \"package.json\",\n    \"README.md\",\n  ],\n}\n</script>\n\n<template>\n  <Sidebar v-bind=\"props\">\n    <SidebarContent>\n      <SidebarGroup>\n        <SidebarGroupLabel>Changes</SidebarGroupLabel>\n        <SidebarGroupContent>\n          <SidebarMenu>\n            <SidebarMenuItem v-for=\"(item, index) in data.changes\" :key=\"index\">\n              <SidebarMenuButton>\n                <File />\n                {{ item.file }}\n              </SidebarMenuButton>\n              <SidebarMenuBadge>{{ item.state }}</SidebarMenuBadge>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarGroupContent>\n      </SidebarGroup>\n      <SidebarGroup>\n        <SidebarGroupLabel>Files</SidebarGroupLabel>\n        <SidebarGroupContent>\n          <SidebarMenu>\n            <Tree v-for=\"(item, index) in data.tree\" :key=\"index\" :item=\"item\" />\n          </SidebarMenu>\n        </SidebarGroupContent>\n      </SidebarGroup>\n    </SidebarContent>\n    <SidebarRail />\n  </Sidebar>\n</template>\n"
    },
    {
      "path": "blocks/sidebar-11/components/Tree.vue",
      "type": "registry:file",
      "target": "blocks/sidebar-11/components/Tree.vue",
      "content": "<script setup lang=\"ts\">\nimport { ChevronRight, File, Folder } from \"@lucide/vue\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/components/ui/collapsible\"\n\nimport {\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n} from \"@/components/ui/sidebar\"\n\nconst props = defineProps<{\n  item: string | any[]\n}>()\n\nconst [name, ...items] = Array.isArray(props.item) ? props.item : [props.item]\n</script>\n\n<template>\n  <SidebarMenuButton\n    v-if=\"!items.length\"\n    :is-active=\"name === 'button.tsx'\"\n    class=\"data-[active=true]:bg-transparent\"\n  >\n    <File />\n    {{ name }}\n  </SidebarMenuButton>\n\n  <SidebarMenuItem v-else>\n    <Collapsible\n      class=\"group/collapsible [&[data-state=open]>button>svg:first-child]:rotate-90\"\n      :default-open=\"name === 'components' || name === 'ui'\"\n    >\n      <CollapsibleTrigger as-child>\n        <SidebarMenuButton>\n          <ChevronRight class=\"transition-transform\" />\n          <Folder />\n          {{ name }}\n        </SidebarMenuButton>\n      </CollapsibleTrigger>\n      <CollapsibleContent>\n        <SidebarMenuSub>\n          <Tree v-for=\"(subItem, index) in items\" :key=\"index\" :item=\"subItem\" />\n        </SidebarMenuSub>\n      </CollapsibleContent>\n    </Collapsible>\n  </SidebarMenuItem>\n</template>\n"
    },
    {
      "path": "blocks/sidebar-11/page.vue",
      "type": "registry:file",
      "target": "blocks/sidebar-11/page.vue",
      "content": "<script lang=\"ts\">\nexport const description = \"A sidebar with a collapsible file tree.\"\nexport const iframeHeight = \"800px\"\n</script>\n\n<script setup lang=\"ts\">\nimport AppSidebar from \"./components/AppSidebar.vue\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/components/ui/sidebar\"\n</script>\n\n<template>\n  <SidebarProvider>\n    <AppSidebar />\n    <SidebarInset>\n      <header class=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n        <SidebarTrigger class=\"-ml-1\" />\n        <Separator\n          orientation=\"vertical\"\n          class=\"mr-2 data-[orientation=vertical]:h-4\"\n        />\n        <Breadcrumb>\n          <BreadcrumbList>\n            <BreadcrumbItem class=\"hidden md:block\">\n              <BreadcrumbLink href=\"#\">\n                components\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator class=\"hidden md:block\" />\n            <BreadcrumbItem class=\"hidden md:block\">\n              <BreadcrumbLink href=\"#\">\n                ui\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator class=\"hidden md:block\" />\n            <BreadcrumbItem>\n              <BreadcrumbPage>button.tsx</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n      </header>\n      <div class=\"flex flex-1 flex-col gap-4 p-4\">\n        <div class=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n          <div class=\"bg-muted/50 aspect-video rounded-xl\" />\n          <div class=\"bg-muted/50 aspect-video rounded-xl\" />\n          <div class=\"bg-muted/50 aspect-video rounded-xl\" />\n        </div>\n        <div class=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n"
    }
  ]
}