[V0_FILE]typescriptreact:file="components/app-sidebar.tsx" source="https://ui.shadcn.com/blocks/sidebar" import * as React from "react" import { ChevronRight, File, Folder } from "lucide-react" import { Collapsible, CollapsibleContent, CollapsibleTrigger, } from "@/components/ui/collapsible" import { Sidebar, SidebarContent, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarMenu, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSub, SidebarRail, } from "@/components/ui/sidebar" // This is sample data. const data = { changes: [ { file: "README.md", state: "M", }, { file: "api/hello/route.ts", state: "U", }, { file: "app/layout.tsx", state: "M", }, ], tree: [ [ "app", [ "api", ["hello", ["route.ts"]], "page.tsx", "layout.tsx", ["blog", ["page.tsx"]], ], ], [ "components", ["ui", "button.tsx", "card.tsx"], "header.tsx", "footer.tsx", ], ["lib", ["util.ts"]], ["public", "favicon.ico", "vercel.svg"], ".eslintrc.json", ".gitignore", "next.config.js", "tailwind.config.js", "package.json", "README.md", ], } export function AppSidebar({ ...props }: React.ComponentProps) { return ( Changes {data.changes.map((item, index) => ( {item.file} {item.state} ))} Files {data.tree.map((item, index) => ( ))} ) } function Tree({ item }: { item: string | any[] }) { const [name, ...items] = Array.isArray(item) ? item : [item] if (!items.length) { return ( {name} ) } return ( {name} {items.map((subItem, index) => ( ))} ) } [V0_FILE]typescriptreact:file="app/dashboard/page.tsx" source="https://ui.shadcn.com/blocks/sidebar" import { AppSidebar } from "../../components/app-sidebar" import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, } from "@/components/ui/breadcrumb" import { Separator } from "@/components/ui/separator" import { SidebarInset, SidebarProvider, SidebarTrigger, } from "@/components/ui/sidebar" export default function Page() { return (

components ui button.tsx

) }

About

About