{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "sheet-7",
  "type": "registry:component",
  "title": "Sheet 7",
  "description": "Sheet 7. 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",
    "label",
    "select",
    "sheet"
  ],
  "files": [
    {
      "path": "components/watermelon/sheet-7.tsx",
      "type": "registry:component",
      "content": "'use client';\n\nimport { useState } from 'react';\n\nimport {\n  FaPlus,\n  FaShieldAlt,\n  FaUser,\n  FaEye,\n  FaCheckCircle,\n  FaTimesCircle,\n} from 'react-icons/fa';\n\nimport { Button } from '@/components/ui/button';\nimport { Input } from '@/components/ui/input';\nimport { Label } from '@/components/ui/label';\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@/components/ui/select';\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from '@/components/ui/sheet';\n\ntype UserType = {\n  id: string;\n  name: string;\n  email: string;\n  role: 'admin' | 'user' | 'viewer';\n  status: 'active' | 'inactive';\n};\n\nconst Sheet7 = () => {\n  const [users, setUsers] = useState<UserType[]>([\n    {\n      id: '1',\n      name: 'Ritik Sharma',\n      email: 'ritik@gmail.com',\n      role: 'admin',\n      status: 'active',\n    },\n    {\n      id: '2',\n      name: 'Aman Verma',\n      email: 'aman@gmail.com',\n      role: 'user',\n      status: 'inactive',\n    },\n  ]);\n\n  const [open, setOpen] = useState(false);\n  const [search, setSearch] = useState('');\n\n  const [form, setForm] = useState({\n    name: '',\n    email: '',\n    role: 'user' as UserType['role'],\n    status: 'active' as UserType['status'],\n  });\n\n  const filteredUsers = users.filter((u) =>\n    `${u.name} ${u.email}`.toLowerCase().includes(search.toLowerCase()),\n  );\n\n  const addUser = () => {\n    if (!form.name || !form.email) return;\n\n    setUsers((prev) => [...prev, { id: String(prev.length + 1), ...form }]);\n\n    setForm({ name: '', email: '', role: 'user', status: 'active' });\n    setOpen(false);\n  };\n\n  return (\n    <div className=\"theme-injected w-full space-y-4\">\n      <div className=\"flex items-center justify-between\">\n        <Input\n          placeholder=\"Search users...\"\n          value={search}\n          onChange={(e) => setSearch(e.target.value)}\n          className=\"max-w-[300px]\"\n        />\n\n        <Sheet open={open} onOpenChange={setOpen}>\n          <SheetTrigger asChild>\n            <Button className='ml-1'>\n              <FaPlus className=\"size-4\" />\n              New User\n            </Button>\n          </SheetTrigger>\n\n          <SheetContent className=\"space-y-6 p-4 \">\n            <SheetHeader className=\"p-0\">\n              <SheetTitle>Create User</SheetTitle>\n              <SheetDescription>\n                Add a new user to your workspace\n              </SheetDescription>\n            </SheetHeader>\n\n            <div className=\"space-y-4\">\n              <div className=\"space-y-2\">\n                <Label>Name</Label>\n                <Input\n                  value={form.name}\n                  onChange={(e) => setForm({ ...form, name: e.target.value })}\n                />\n              </div>\n\n              <div className=\"space-y-2\">\n                <Label>Email</Label>\n                <Input\n                  value={form.email}\n                  onChange={(e) => setForm({ ...form, email: e.target.value })}\n                />\n              </div>\n\n              <div className=\"space-y-2\">\n                <Label>Role</Label>\n                <Select\n                  value={form.role}\n                  onValueChange={(v: UserType['role']) =>\n                    setForm({ ...form, role: v })\n                  }\n                >\n                  <SelectTrigger className=\"flex w-full items-center gap-2\">\n                    <SelectValue />\n                  </SelectTrigger>\n                  <SelectContent>\n                    <SelectItem value=\"admin\">\n                      <div className=\"flex items-center gap-2\">\n                        <FaShieldAlt className=\"text-primary size-4\" />\n                        Admin\n                      </div>\n                    </SelectItem>\n\n                    <SelectItem value=\"user\">\n                      <div className=\"flex items-center gap-2\">\n                        <FaUser className=\"text-muted-foreground size-4\" />\n                        User\n                      </div>\n                    </SelectItem>\n\n                    <SelectItem value=\"viewer\">\n                      <div className=\"flex items-center gap-2\">\n                        <FaEye className=\"text-muted-foreground size-4\" />\n                        Viewer\n                      </div>\n                    </SelectItem>\n                  </SelectContent>\n                </Select>\n              </div>\n\n              <div className=\"space-y-2\">\n                <Label>Status</Label>\n                <Select\n                  value={form.status}\n                  onValueChange={(v: UserType['status']) =>\n                    setForm({ ...form, status: v })\n                  }\n                >\n                  <SelectTrigger className=\"flex w-full items-center gap-2\">\n                    <SelectValue />\n                  </SelectTrigger>\n                  <SelectContent>\n                    <SelectItem value=\"active\">\n                      <div className=\"flex items-center gap-2\">\n                        <FaCheckCircle className=\"text-primary size-4\" />\n                        Active\n                      </div>\n                    </SelectItem>\n\n                    <SelectItem value=\"inactive\">\n                      <div className=\"flex items-center gap-2\">\n                        <FaTimesCircle className=\"text-muted-foreground size-4\" />\n                        Inactive\n                      </div>\n                    </SelectItem>\n                  </SelectContent>\n                </Select>\n              </div>\n            </div>\n\n            <SheetFooter className=\"-mb-1 p-0\">\n              <Button onClick={addUser}>Create</Button>\n              <SheetClose asChild>\n                <Button variant=\"outline\">Cancel</Button>\n              </SheetClose>\n            </SheetFooter>\n          </SheetContent>\n        </Sheet>\n      </div>\n\n      <div className=\"overflow-x-scroll rounded-lg border\">\n        <table className=\"w-full text-sm\">\n          <thead className=\"bg-muted/50\">\n            <tr>\n              <th className=\"p-3 text-left font-medium\">Name</th>\n              <th className=\"p-3 text-left font-medium\">Email</th>\n              <th className=\"p-3 text-left font-medium\">Role</th>\n              <th className=\"p-3 text-left font-medium\">Status</th>\n            </tr>\n          </thead>\n\n          <tbody>\n            {filteredUsers.length > 0 ? (\n              filteredUsers.map((user) => (\n                <tr key={user.id} className=\"border-t\">\n                  <td className=\"p-3 font-medium\">{user.name}</td>\n                  <td className=\"text-muted-foreground p-3\">{user.email}</td>\n                  <td className=\"p-3 capitalize\">{user.role}</td>\n                  <td className=\"p-3 capitalize\">{user.status}</td>\n                </tr>\n              ))\n            ) : (\n              <tr>\n                <td\n                  colSpan={4}\n                  className=\"text-muted-foreground p-6 text-center\"\n                >\n                  No users found\n                </td>\n              </tr>\n            )}\n          </tbody>\n        </table>\n      </div>\n    </div>\n  );\n};\n\nexport default Sheet7;\n"
    }
  ]
}