{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"c-sortable-6","type":"registry:block","title":"Sortable sidebar navigation with frame","description":"Sortable sidebar navigation with frame","dependencies":[],"registryDependencies":["@reui/badge","@reui/frame","@reui/sortable"],"files":[{"path":"c-sortable-6.tsx","type":"registry:block","content":"\"use client\"\n\nimport { ReactNode, useState } from \"react\"\nimport { Badge } from \"@/components/reui/badge\"\nimport {\n  Frame,\n  FrameHeader,\n  FramePanel,\n  FrameTitle,\n} from \"@/components/reui/frame\"\nimport {\n  Sortable,\n  SortableItem,\n  SortableItemHandle,\n} from \"@/components/reui/sortable\"\n\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\ninterface NavItem {\n  id: string\n  label: string\n  icon: ReactNode\n  count?: number\n}\n\nconst defaultItems: NavItem[] = [\n  {\n    id: \"1\",\n    label: \"Dashboard\",\n    icon: (\n      <IconPlaceholder\n        lucide=\"LayoutDashboardIcon\"\n        tabler=\"IconLayoutDashboard\"\n        hugeicons=\"DashboardSquare02Icon\"\n        phosphor=\"LayoutIcon\"\n        remixicon=\"RiDashboardLine\"\n        className=\"text-muted-foreground size-4\"\n      />\n    ),\n  },\n  {\n    id: \"2\",\n    label: \"Inbox\",\n    icon: (\n      <IconPlaceholder\n        lucide=\"InboxIcon\"\n        tabler=\"IconInbox\"\n        hugeicons=\"InboxIcon\"\n        phosphor=\"TrayIcon\"\n        remixicon=\"RiInboxLine\"\n        className=\"text-muted-foreground size-4\"\n      />\n    ),\n    count: 5,\n  },\n  {\n    id: \"3\",\n    label: \"Projects\",\n    icon: (\n      <IconPlaceholder\n        lucide=\"FolderIcon\"\n        tabler=\"IconFolder\"\n        hugeicons=\"FolderIcon\"\n        phosphor=\"FolderIcon\"\n        remixicon=\"RiFolderLine\"\n        className=\"text-muted-foreground size-4\"\n      />\n    ),\n    count: 12,\n  },\n  {\n    id: \"4\",\n    label: \"Calendar\",\n    icon: (\n      <IconPlaceholder\n        lucide=\"CalendarIcon\"\n        tabler=\"IconCalendarEvent\"\n        hugeicons=\"Calendar04Icon\"\n        phosphor=\"CalendarBlankIcon\"\n        remixicon=\"RiCalendarLine\"\n        className=\"text-muted-foreground size-4\"\n      />\n    ),\n  },\n  {\n    id: \"5\",\n    label: \"Analytics\",\n    icon: (\n      <IconPlaceholder\n        lucide=\"BarChart3Icon\"\n        tabler=\"IconChartBar\"\n        hugeicons=\"ChartBarLineIcon\"\n        phosphor=\"ChartBarIcon\"\n        remixicon=\"RiBarChartBoxLine\"\n        className=\"text-muted-foreground size-4\"\n      />\n    ),\n  },\n  {\n    id: \"6\",\n    label: \"Settings\",\n    icon: (\n      <IconPlaceholder\n        lucide=\"SettingsIcon\"\n        tabler=\"IconSettings\"\n        hugeicons=\"SettingsIcon\"\n        phosphor=\"GearIcon\"\n        remixicon=\"RiSettings3Line\"\n        className=\"text-muted-foreground size-4\"\n      />\n    ),\n  },\n]\n\nexport function Pattern() {\n  const [items, setItems] = useState<NavItem[]>(defaultItems)\n\n  return (\n    <div className=\"mx-auto w-full max-w-xs\">\n      <Frame spacing=\"xs\">\n        <FrameHeader>\n          <FrameTitle>Navigation</FrameTitle>\n        </FrameHeader>\n        <FramePanel className=\"p-2!\">\n          <Sortable\n            value={items}\n            onValueChange={setItems}\n            getItemValue={(item) => item.id}\n            strategy=\"vertical\"\n            className=\"space-y-0.5\"\n          >\n            {items.map((item) => (\n              <SortableItem key={item.id} value={item.id}>\n                <div className=\"hover:bg-accent flex items-center gap-1.5 rounded-md px-2 py-1.5 transition-colors\">\n                  <SortableItemHandle className=\"text-muted-foreground hover:text-foreground opacity-0 transition-opacity group-hover:opacity-100 [div:hover>&]:opacity-100\">\n                    <IconPlaceholder\n                      lucide=\"GripVerticalIcon\"\n                      tabler=\"IconGripVertical\"\n                      hugeicons=\"DragDropVerticalIcon\"\n                      phosphor=\"DotsSixVerticalIcon\"\n                      remixicon=\"RiDraggable\"\n                      className=\"size-3.5\"\n                    />\n                  </SortableItemHandle>\n                  {item.icon}\n                  <span className=\"flex-1 text-sm\">{item.label}</span>\n                  {item.count && (\n                    <Badge variant=\"outline\" size=\"sm\" className=\"rounded-full\">\n                      {item.count}\n                    </Badge>\n                  )}\n                </div>\n              </SortableItem>\n            ))}\n          </Sortable>\n        </FramePanel>\n      </Frame>\n    </div>\n  )\n}","target":"components/examples/c-sortable-6.tsx"}],"meta":{"order":6,"gridSize":1}}