sidebar-rsc.json — ui Source File

Source Code

{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "sidebar-rsc",
  "type": "registry:internal",
  "author": "shadcn (https://ui.shadcn.com)",
  "files": [
    {
      "path": "internal/sidebar-rsc.tsx",
      "content": "import * as React from \"react\"\nimport { Frame, LifeBuoy, Map, PieChart, Send } from \"lucide-react\"\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSkeleton,\n  SidebarProvider,\n} from \"@/registry/default/ui/sidebar\"\n\nconst projects = [\n  {\n    name: \"Design Engineering\",\n    url: \"#\",\n    icon: Frame,\n    badge: \"24\",\n  },\n  {\n    name: \"Sales & Marketing\",\n    url: \"#\",\n    icon: PieChart,\n    badge: \"12\",\n  },\n  {\n    name: \"Travel\",\n    url: \"#\",\n    icon: Map,\n    badge: \"3\",\n  },\n  {\n    name: \"Support\",\n    url: \"#\",\n    icon: LifeBuoy,\n    badge: \"21\",\n  },\n  {\n    name: \"Feedback\",\n    url: \"#\",\n    icon: Send,\n    badge: \"8\",\n  },\n]\n\n// Dummy fetch function\nasync function fetchProjects() {\n  await new Promise((resolve) => setTimeout(resolve, 3000))\n  return projects\n}\n\nexport default function AppSidebar() {\n  return (\n    <SidebarProvider>\n      <Sidebar>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupLabel>Projects</SidebarGroupLabel>\n            <SidebarGroupContent>\n              <React.Suspense fallback={<NavProjectsSkeleton />}>\n                <NavProjects />\n              </React.Suspense>\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n      </Sidebar>\n    </SidebarProvider>\n  )\n}\n\nfunction NavProjectsSkeleton() {\n  return (\n    <SidebarMenu>\n      {Array.from({ length: 5 }).map((_, index) => (\n        <SidebarMenuItem key={index}>\n          <SidebarMenuSkeleton showIcon />\n        </SidebarMenuItem>\n      ))}\n    </SidebarMenu>\n  )\n}\n\nasync function NavProjects() {\n  const projects = await fetchProjects()\n\n  return (\n    <SidebarMenu>\n      {projects.map((project) => (\n        <SidebarMenuItem key={project.name}>\n          <SidebarMenuButton asChild>\n            <a href={project.url}>\n              <project.icon />\n              <span>{project.name}</span>\n            </a>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      ))}\n    </SidebarMenu>\n  )\n}\n",
      "type": "registry:component",
      "target": ""
    }
  ]
}