{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"c-sortable-5","type":"registry:block","title":"Sortable settings priority with frame","description":"Sortable settings priority with frame","dependencies":[],"registryDependencies":["@reui/frame","@reui/sortable","switch"],"files":[{"path":"c-sortable-5.tsx","type":"registry:block","content":"\"use client\"\n\nimport { useState } from \"react\"\nimport {\n  Frame,\n  FrameDescription,\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 { Switch } from \"@/components/ui/switch\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\ninterface NotificationChannel {\n  id: string\n  name: string\n  description: string\n  enabled: boolean\n}\n\nconst defaultChannels: NotificationChannel[] = [\n  {\n    id: \"1\",\n    name: \"Email\",\n    description: \"Send notifications via email\",\n    enabled: true,\n  },\n  {\n    id: \"2\",\n    name: \"Push Notifications\",\n    description: \"Browser and mobile push\",\n    enabled: true,\n  },\n  { id: \"3\", name: \"SMS\", description: \"Text message alerts\", enabled: false },\n  {\n    id: \"4\",\n    name: \"Slack\",\n    description: \"Post to Slack channels\",\n    enabled: true,\n  },\n  {\n    id: \"5\",\n    name: \"Webhook\",\n    description: \"Send to custom endpoint\",\n    enabled: false,\n  },\n]\n\nexport function Pattern() {\n  const [channels, setChannels] =\n    useState<NotificationChannel[]>(defaultChannels)\n\n  const toggleChannel = (id: string) => {\n    setChannels((prev) =>\n      prev.map((ch) => (ch.id === id ? { ...ch, enabled: !ch.enabled } : ch))\n    )\n  }\n\n  return (\n    <div className=\"mx-auto w-full max-w-md\">\n      <Frame spacing=\"sm\">\n        <FrameHeader>\n          <FrameTitle>Notification Priority</FrameTitle>\n          <FrameDescription>\n            Drag to reorder by priority. Top channels are tried first.\n          </FrameDescription>\n        </FrameHeader>\n        <Sortable\n          value={channels}\n          onValueChange={setChannels}\n          getItemValue={(item) => item.id}\n          strategy=\"vertical\"\n          className=\"space-y-1\"\n        >\n          {channels.map((channel) => (\n            <SortableItem key={channel.id} value={channel.id}>\n              <FramePanel className=\"p-0!\">\n                <div className=\"flex items-center gap-3 px-3 py-2.5\">\n                  <SortableItemHandle className=\"text-muted-foreground hover:text-foreground\">\n                    <IconPlaceholder\n                      lucide=\"GripVerticalIcon\"\n                      tabler=\"IconGripVertical\"\n                      hugeicons=\"DragDropVerticalIcon\"\n                      phosphor=\"DotsSixVerticalIcon\"\n                      remixicon=\"RiDraggable\"\n                      className=\"size-4\"\n                    />\n                  </SortableItemHandle>\n                  <div className=\"min-w-0 flex-1\">\n                    <p className=\"text-sm font-medium\">{channel.name}</p>\n                    <p className=\"text-muted-foreground text-xs\">\n                      {channel.description}\n                    </p>\n                  </div>\n                  <Switch\n                    checked={channel.enabled}\n                    onCheckedChange={() => toggleChannel(channel.id)}\n                  />\n                </div>\n              </FramePanel>\n            </SortableItem>\n          ))}\n        </Sortable>\n      </Frame>\n    </div>\n  )\n}","target":"components/examples/c-sortable-5.tsx"}],"meta":{"order":5,"gridSize":1}}