{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "sheet-1",
  "type": "registry:component",
  "title": "Sheet 1",
  "description": "Sheet 1. A panel that slides in from the edge of the screen to display additional content, forms, or actions without navigating away.",
  "dependencies": [
    "react-icons"
  ],
  "registryDependencies": [
    "button",
    "input",
    "sheet"
  ],
  "files": [
    {
      "path": "components/watermelon/sheet-1.tsx",
      "type": "registry:component",
      "content": "'use client';\n\nimport { useState } from 'react';\nimport { Button } from '@/components/base-ui/button';\nimport { Input } from '@/components/base-ui/input';\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from '@/components/base-ui/sheet';\nimport { FaBell, FaPalette, FaGlobe } from 'react-icons/fa';\n\nconst Sheet1 = () => {\n  const [settings, setSettings] = useState({\n    username: '',\n    theme: '',\n    language: '',\n  });\n\n  return (\n    <Sheet>\n      <SheetTrigger asChild>\n        <Button variant=\"outline\">Preferences</Button>\n      </SheetTrigger>\n\n      <SheetContent className=\" rounded-lg\">\n        <SheetHeader>\n          <SheetTitle className=\"flex items-center gap-2\">\n            <FaBell />\n            App Preferences\n          </SheetTitle>\n        </SheetHeader>\n\n        <div className=\"mt-6 flex flex-col gap-6 px-4\">\n          <div className=\"bg-muted/50 flex flex-col gap-3 rounded-lg border p-4\">\n            <div className=\"flex items-center gap-2 text-sm font-medium\">\n              <FaPalette />\n              Appearance\n            </div>\n            <Input\n              placeholder=\"Light / Dark / System\"\n              value={settings.theme}\n              onChange={(e) =>\n                setSettings({ ...settings, theme: e.target.value })\n              }\n            />\n          </div>\n\n          <div className=\"bg-muted/50 flex flex-col gap-3 rounded-lg border p-4\">\n            <div className=\"flex items-center gap-2 text-sm font-medium\">\n              <FaGlobe />\n              Language\n            </div>\n            <Input\n              placeholder=\"e.g. English\"\n              value={settings.language}\n              onChange={(e) =>\n                setSettings({ ...settings, language: e.target.value })\n              }\n            />\n          </div>\n\n          <div className=\"bg-muted/50 flex flex-col gap-3 rounded-lg border p-4\">\n            <div className=\"flex items-center gap-2 text-sm font-medium\">\n              <FaBell />\n              Notification Name\n            </div>\n            <Input\n              placeholder=\"Enter display name\"\n              value={settings.username}\n              onChange={(e) =>\n                setSettings({ ...settings, username: e.target.value })\n              }\n            />\n          </div>\n        </div>\n\n        <SheetFooter className=\"flex gap-2\">\n          <Button className=\"w-full\">Apply Changes</Button>\n          <SheetClose asChild>\n            <Button variant=\"outline\" className=\"w-full\">\n              Dismiss\n            </Button>\n          </SheetClose>\n        </SheetFooter>\n      </SheetContent>\n    </Sheet>\n  );\n};\n\nexport default Sheet1;\n"
    }
  ]
}