{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "swipe-to-delete-demo",
  "title": "Swipe to Delete Demo",
  "description": "Demo usage for the Swipe to Delete component",
  "registryDependencies": [
    "@spectrumui/swipe-to-delete"
  ],
  "files": [
    {
      "path": "app/registry/swipe-to-delete/swipe-to-delete-demo.tsx",
      "content": "\"use client\"\n\nimport React, { useState } from \"react\"\nimport { SwipeToDelete } from \"@/components/spectrumui/swipe-to-delete\"\n\nconst EMAILS = [\n  {\n    id: 1,\n    sender: \"Ava Chen\",\n    initials: \"AC\",\n    preview: \"Design review notes — the new empty states look great\",\n    time: \"9:41 AM\",\n  },\n  {\n    id: 2,\n    sender: \"Marcus Reid\",\n    initials: \"MR\",\n    preview: \"Re: Q3 roadmap — can we move the sync to Thursday?\",\n    time: \"8:17 AM\",\n  },\n  {\n    id: 3,\n    sender: \"Priya Nair\",\n    initials: \"PN\",\n    preview: \"Your invoice for June is ready to download\",\n    time: \"Yesterday\",\n  },\n]\n\nexport default function SwipeToDeleteDemo() {\n  const [emails, setEmails] = useState(EMAILS)\n\n  return (\n    <div className=\"flex w-full flex-col items-center gap-5 py-10\">\n      <div className=\"w-full max-w-sm\">\n        {emails.map((email) => (\n          <SwipeToDelete\n            key={email.id}\n            label={`email from ${email.sender}`}\n            className=\"mb-2 last:mb-0\"\n            onDelete={() =>\n              setEmails((current) =>\n                current.filter((item) => item.id !== email.id),\n              )\n            }\n          >\n            <div className=\"flex items-center gap-3 p-3\">\n              <span className=\"flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-neutral-100 text-xs font-medium text-neutral-600 dark:bg-neutral-800 dark:text-neutral-300\">\n                {email.initials}\n              </span>\n              <span className=\"min-w-0 flex-1\">\n                <span className=\"flex items-baseline justify-between gap-2\">\n                  <span className=\"truncate text-sm font-medium text-neutral-900 dark:text-neutral-100\">\n                    {email.sender}\n                  </span>\n                  <span className=\"shrink-0 text-xs text-neutral-500 dark:text-neutral-400\">\n                    {email.time}\n                  </span>\n                </span>\n                <span className=\"mt-0.5 block truncate text-xs text-neutral-500 dark:text-neutral-400\">\n                  {email.preview}\n                </span>\n              </span>\n            </div>\n          </SwipeToDelete>\n        ))}\n\n        {emails.length === 0 && (\n          <div className=\"flex justify-center py-6\">\n            <button\n              type=\"button\"\n              onClick={() => setEmails(EMAILS)}\n              className=\"text-sm font-medium text-neutral-600 underline-offset-4 hover:underline dark:text-neutral-300\"\n            >\n              Reset inbox\n            </button>\n          </div>\n        )}\n      </div>\n\n      <p className=\"text-sm text-neutral-500 dark:text-neutral-400\">\n        Drag a row left to delete — or hover to peek, then click the zone\n      </p>\n    </div>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/spectrumui/swipe-to-delete-demo.tsx"
    }
  ],
  "type": "registry:component"
}