{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"c-sortable-7","type":"registry:block","title":"Sortable image gallery grid with frame","description":"Sortable image gallery grid with frame","dependencies":[],"registryDependencies":["@reui/frame","@reui/sortable"],"files":[{"path":"c-sortable-7.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 { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\ninterface GalleryImage {\n  id: string\n  name: string\n  dimensions: string\n  size: string\n}\n\nconst defaultImages: GalleryImage[] = [\n  { id: \"1\", name: \"hero-banner.jpg\", dimensions: \"1920×1080\", size: \"2.4 MB\" },\n  { id: \"2\", name: \"product-shot.png\", dimensions: \"800×600\", size: \"1.8 MB\" },\n  { id: \"3\", name: \"team-photo.jpg\", dimensions: \"1200×800\", size: \"3.2 MB\" },\n  { id: \"4\", name: \"logo-dark.svg\", dimensions: \"240×60\", size: \"12 KB\" },\n  { id: \"5\", name: \"og-image.png\", dimensions: \"1200×630\", size: \"890 KB\" },\n  { id: \"6\", name: \"favicon.ico\", dimensions: \"32×32\", size: \"4 KB\" },\n]\n\nexport function Pattern() {\n  const [images, setImages] = useState<GalleryImage[]>(defaultImages)\n\n  return (\n    <div className=\"mx-auto w-full max-w-md\">\n      <Frame spacing=\"xs\">\n        <FrameHeader>\n          <FrameTitle>Media Library</FrameTitle>\n          <FrameDescription>Drag to reorder display priority</FrameDescription>\n        </FrameHeader>\n        <FramePanel className=\"p-2!\">\n          <Sortable\n            value={images}\n            onValueChange={setImages}\n            getItemValue={(item) => item.id}\n            strategy=\"grid\"\n            className=\"grid grid-cols-3 gap-2\"\n          >\n            {images.map((image) => (\n              <SortableItem key={image.id} value={image.id}>\n                <div className=\"bg-muted group rounded-lg relative flex flex-col items-center justify-center gap-2 border p-4\">\n                  <SortableItemHandle className=\"text-muted-foreground hover:text-foreground absolute top-1.5 right-1.5 opacity-0 transition-opacity group-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                  <IconPlaceholder\n                    lucide=\"ImageIcon\"\n                    tabler=\"IconPhoto\"\n                    hugeicons=\"ImageIcon\"\n                    phosphor=\"ImageIcon\"\n                    remixicon=\"RiImageLine\"\n                    className=\"text-muted-foreground size-5\"\n                  />\n                  <div className=\"w-full text-center\">\n                    <p className=\"truncate text-xs font-medium\">{image.name}</p>\n                    <p className=\"text-muted-foreground text-[10px]\">\n                      {image.dimensions} &middot; {image.size}\n                    </p>\n                  </div>\n                </div>\n              </SortableItem>\n            ))}\n          </Sortable>\n        </FramePanel>\n      </Frame>\n    </div>\n  )\n}","target":"components/examples/c-sortable-7.tsx"}],"meta":{"order":7,"gridSize":1}}