{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "popover-demo",
  "type": "registry:component",
  "registryDependencies": [
    "popover"
  ],
  "files": [
    {
      "path": "registry/default/example/popover-demo.tsx",
      "content": "\"use client\"\n\nimport React from \"react\"\nimport { Image as ImageIcon, Paintbrush, Plus } from \"lucide-react\"\n\nimport {\n  PopoverBody,\n  PopoverButton,\n  PopoverCloseButton,\n  PopoverContent,\n  PopoverFooter,\n  PopoverForm,\n  PopoverHeader,\n  PopoverLabel,\n  PopoverRoot,\n  PopoverSubmitButton,\n  PopoverTextarea,\n  PopoverTrigger,\n} from \"../ui/popover\"\n\nfunction PopoverInput() {\n  const handleSubmit = (note: string) => {\n    console.log(\"Submitted note:\", note)\n  }\n\n  return (\n    <PopoverRoot>\n      <PopoverTrigger>Add Feedback</PopoverTrigger>\n      <PopoverContent>\n        <PopoverForm onSubmit={handleSubmit}>\n          <PopoverLabel>Add Feedback</PopoverLabel>\n          <PopoverTextarea />\n          <PopoverFooter>\n            <PopoverCloseButton />\n            <PopoverSubmitButton />\n          </PopoverFooter>\n        </PopoverForm>\n      </PopoverContent>\n    </PopoverRoot>\n  )\n}\n\nconst ColorPickerPopover = () => {\n  const colors = [\n    \"#FF5733\",\n    \"#33FF57\",\n    \"#3357FF\",\n    \"#FF33F1\",\n    \"#33FFF1\",\n    \"#F1FF33\",\n  ]\n\n  return (\n    <PopoverRoot>\n      <PopoverTrigger>Choose Color</PopoverTrigger>\n      <PopoverContent className=\"h-48 w-48\">\n        <PopoverHeader>Pick a Color</PopoverHeader>\n        <PopoverBody className=\"flex flex-col items-center justify-center\">\n          <div className=\"grid grid-cols-3 gap-2\">\n            {colors.map((color) => (\n              <button\n                key={color}\n                className=\"h-8 w-8 rounded-full focus:ring-2 focus:ring-offset-2 focus:outline-none\"\n                style={{ backgroundColor: color }}\n                onClick={() => console.log(`Selected color: ${color}`)}\n              />\n            ))}\n          </div>\n        </PopoverBody>\n        <PopoverFooter>\n          <PopoverCloseButton />\n        </PopoverFooter>\n      </PopoverContent>\n    </PopoverRoot>\n  )\n}\n\nconst QuickActionsPopover = () => {\n  const actions = [\n    {\n      icon: <Plus className=\"h-4 w-4\" />,\n      label: \"New File\",\n      action: () => console.log(\"New File\"),\n    },\n    {\n      icon: <ImageIcon className=\"h-4 w-4\" />,\n      label: \"Upload Image\",\n      action: () => console.log(\"Upload Image\"),\n    },\n    {\n      icon: <Paintbrush className=\"h-4 w-4\" />,\n      label: \"Edit Colors\",\n      action: () => console.log(\"Edit Colors\"),\n    },\n  ]\n\n  return (\n    <PopoverRoot>\n      <PopoverTrigger>Quick Actions</PopoverTrigger>\n      <PopoverContent className=\"h-48 w-48\">\n        <PopoverHeader>Quick Actions</PopoverHeader>\n        <PopoverBody>\n          {actions.map((action, index) => (\n            <PopoverButton key={index} onClick={action.action}>\n              {action.icon}\n              <span>{action.label}</span>\n            </PopoverButton>\n          ))}\n        </PopoverBody>\n      </PopoverContent>\n    </PopoverRoot>\n  )\n}\n\nconst ImagePreviewPopover = () => {\n  return (\n    <PopoverRoot>\n      <PopoverTrigger>Preview Image</PopoverTrigger>\n      <PopoverContent className=\"h-[500px] w-96\">\n        <PopoverHeader>Image Preview</PopoverHeader>\n        <PopoverBody>\n          <img\n            src=\"/placeholder.svg?height=200&width=300\"\n            alt=\"Preview\"\n            className=\"h-auto w-full rounded-md\"\n          />\n          <p className=\"mt-2 text-sm text-zinc-600 dark:text-zinc-400\">\n            Image preview description goes here.\n          </p>\n        </PopoverBody>\n        <PopoverFooter>\n          <PopoverCloseButton />\n        </PopoverFooter>\n      </PopoverContent>\n    </PopoverRoot>\n  )\n}\n\nexport default function PopoverExamples() {\n  return (\n    <div className=\"space-y-8 p-8\">\n      <div className=\"grid gap-36 md:grid-cols-2\">\n        <div className=\"flex flex-col flex-wrap gap-24\">\n          <PopoverInput />\n          <ColorPickerPopover />\n        </div>\n        <div className=\"flex flex-col flex-wrap gap-24\">\n          <QuickActionsPopover />\n          <ImagePreviewPopover />\n        </div>\n      </div>\n    </div>\n  )\n}\n",
      "type": "registry:component"
    }
  ]
}