{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "input-12",
  "title": "Dropzone Input",
  "description": "A dropzone input component",
  "dependencies": [
    "lucide-react",
    "react-dropzone"
  ],
  "registryDependencies": [
    "input",
    "label"
  ],
  "files": [
    {
      "path": "src/components/customized/input/input-12.tsx",
      "content": "\"use client\";\n\nimport { ImageIcon, XCircleIcon } from \"lucide-react\";\nimport Image from \"next/image\";\nimport { useState } from \"react\";\nimport Dropzone from \"react-dropzone\";\nimport { cn } from \"@/lib/utils\";\nimport { Label } from \"@/registry/ui/label\";\n\nconst ImagePreview = ({\n  url,\n  onRemove,\n}: {\n  url: string;\n  onRemove: () => void;\n}) => (\n  <div className=\"relative aspect-square\">\n    <button\n      className=\"absolute top-0 right-0 translate-x-1/2 -translate-y-1/2\"\n      onClick={onRemove}\n    >\n      <XCircleIcon className=\"h-5 w-5 fill-primary text-primary-foreground\" />\n    </button>\n    <Image\n      alt=\"\"\n      className=\"h-full w-full rounded-md border border-border object-cover\"\n      height={500}\n      src={url}\n      width={500}\n    />\n  </div>\n);\n\nexport default function InputDemo() {\n  const [profilePicture, setProfilePicture] = useState<string | null>(null);\n\n  return (\n    <div className=\"w-full max-w-40\">\n      <Label htmlFor=\"profile\">Profile Picture</Label>\n      <div className=\"mt-2 w-full\">\n        {profilePicture ? (\n          <ImagePreview\n            onRemove={() => setProfilePicture(null)}\n            url={profilePicture}\n          />\n        ) : (\n          <Dropzone\n            accept={{\n              \"image/png\": [\".png\", \".jpg\", \".jpeg\", \".webp\"],\n            }}\n            maxFiles={1}\n            onDrop={(acceptedFiles) => {\n              const file = acceptedFiles[0];\n              if (file) {\n                const imageUrl = URL.createObjectURL(file);\n                setProfilePicture(imageUrl);\n              }\n            }}\n          >\n            {({\n              getRootProps,\n              getInputProps,\n              isDragActive,\n              isDragAccept,\n              isDragReject,\n            }) => (\n              <div\n                {...getRootProps()}\n                className={cn(\n                  \"flex aspect-square items-center justify-center rounded-md border border-dashed focus:border-primary focus:outline-hidden\",\n                  {\n                    \"border-primary bg-secondary\": isDragActive && isDragAccept,\n                    \"border-destructive bg-destructive/20\":\n                      isDragActive && isDragReject,\n                  }\n                )}\n              >\n                <input {...getInputProps()} id=\"profile\" />\n                <ImageIcon className=\"h-16 w-16\" strokeWidth={1.25} />\n              </div>\n            )}\n          </Dropzone>\n        )}\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}