[V0_FILE]typescriptreact:file="hooks/use-submenu-state.ts" isMerged="true" import { useState, useCallback } from "react" export function useSubmenuState(initialState: Record = {}) { const [openStates, setOpenStates] = useState(initialState) const toggleSubmenu = useCallback((id: string) => { setOpenStates((prev) => ({ ...prev, [id]: !prev[id] })) }, []) return { openStates, toggleSubmenu } } [V0_FILE]typescriptreact:file="components/card-sidenav.tsx" isMerged="true" "use client" import { ChevronDown, ChevronRight } from "lucide-react" import { cn } from "@/lib/utils" import { Sidebar, SidebarContent, SidebarHeader, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, } from "@/components/ui/sidebar" import { useSubmenuState } from "@/hooks/use-submenu-state" interface MenuItem { id: string title: string items?: MenuItem[] } interface CardSidenavProps { items: MenuItem[] } export function CardSidenav({ items }: CardSidenavProps) { const { openStates, toggleSubmenu } = useSubmenuState() const renderMenuItem = (item: MenuItem) => { const hasSubItems = item.items && item.items.length > 0 const isOpen = openStates[item.id] return ( hasSubItems && toggleSubmenu(item.id)} className={cn("w-full justify-between", hasSubItems && "font-semibold")} > {item.title} {hasSubItems && ( {isOpen ? : } )} {hasSubItems && ( {isOpen && item.items!.map((subItem) => ( {subItem.title} ))} )} ) } return (

{items.map(renderMenuItem)} ) } [V0_FILE]typescriptreact:file="components/file-explorer-nav.tsx" "use client" import * as React from "react" import { ChevronRight, File, Folder, FolderOpen } from "lucide-react" import { cn } from "@/lib/utils" interface FileItem { id: string name: string type: "file" | "folder" path?: string items?: FileItem[] } interface FileExplorerNavProps { items: FileItem[] } export function FileExplorerNav({ items }: FileExplorerNavProps) { const [openFolders, setOpenFolders] = React.useState>({}) const toggleFolder = (id: string) => { setOpenFolders((prev) => ({ ...prev, [id]: !prev[id] })) } const renderItem = (item: FileItem, level = 0) => { const isOpen = openFolders[item.id] const hasItems = item.items && item.items.length > 0 return (

{hasItems && isOpen && (

{item.items!.map((subItem) => renderItem(subItem, level + 1))}

)}

) } return (

{items.map((item) => renderItem(item))}

) } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" import { FileExplorerNav } from "@/components/file-explorer-nav" const fileStructure = [ { id: "app", name: "app", type: "folder", items: [ { id: "layout", name: "layout.js", type: "file", }, { id: "marketing", name: "(marketing)", type: "folder", items: [ { id: "about", name: "about", type: "folder", path: "/about", items: [ { id: "about-page", name: "page.js", type: "file", }, ], }, { id: "blog", name: "blog", type: "folder", path: "/blog", items: [ { id: "blog-page", name: "page.js", type: "file", }, ], }, ], }, { id: "shop", name: "(shop)", type: "folder", items: [ { id: "account", name: "account", type: "folder", path: "/account", items: [ { id: "account-page", name: "page.js", type: "file", }, ], }, ], }, ], }, ] export default function Home() { return (

) } [V0_FILE]typescript:file="tailwind.config.ts" import type { Config } from "tailwindcss" const config = { content: ["./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}"], theme: { extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, }, }, }, } satisfies Config export default config

About

About