diff --git a/src/app/playground/components/playground-sidebar.tsx b/src/app/playground/components/playground-sidebar.tsx index 7e21b54..852dace 100644 --- a/src/app/playground/components/playground-sidebar.tsx +++ b/src/app/playground/components/playground-sidebar.tsx @@ -1,10 +1,4 @@ import * as React from "react"; -import { ChevronRight, File, Folder } from "lucide-react"; -import { - Collapsible, - CollapsibleContent, - CollapsibleTrigger, -} from "@/components/ui/collapsible"; import { Sidebar, SidebarContent, @@ -12,28 +6,19 @@ import { SidebarGroupContent, SidebarGroupLabel, SidebarMenu, - SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSub, SidebarRail, } from "@/components/ui/sidebar"; -// This is sample data. +import { + Collapsible, + CollapsibleContent, + CollapsibleTrigger, +} from "@/components/ui/collapsible"; +import { ChevronRight, File, Folder } from "lucide-react"; + const data = { - changes: [ - { - file: "README.md", - state: "M", - }, - { - file: "api/hello/route.ts", - state: "U", - }, - { - file: "app/layout.tsx", - state: "M", - }, - ], tree: [ [ "app", @@ -61,28 +46,13 @@ const data = { "README.md", ], }; + export function PlaygroundSidebar({ ...props }: React.ComponentProps) { return ( - - Changes - - - {data.changes.map((item, index) => ( - - - - {item.file} - - {item.state} - - ))} - - - Files @@ -98,6 +68,7 @@ export function PlaygroundSidebar({ ); } + function Tree({ item }: { item: string | any[] }) { const [name, ...items] = Array.isArray(item) ? item : [item]; if (!items.length) {