{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "cruds-03",
  "type": "registry:block",
  "description": "Stylist account settings with profile photo upload",
  "registryDependencies": [
    "button",
    "card",
    "input",
    "label",
    "select"
  ],
  "files": [
    {
      "path": "creative-tim-ui/blocks/cruds-03/page.tsx",
      "content": "\"use client\"\n\nimport { Upload } from \"lucide-react\"\n\nimport { Button } from \"@/components/ui/button\"\nimport { Card } from \"@/components/ui/card\"\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\"\n\nexport default function Cruds03() {\n  return (\n    <section className=\"grid min-h-screen place-items-center py-16\">\n      <Card className=\"mx-auto w-full max-w-3xl p-6 lg:p-8\">\n        <div className=\"mb-6\">\n          <h3 className=\"text-2xl font-semibold\">Stylist Account Settings</h3>\n          <p className=\"text-muted-foreground mt-1 text-sm\">\n            Configure your profile, roles, and permissions for your stylist\n            account.\n          </p>\n        </div>\n        <form action=\"#\" className=\"space-y-6\">\n          <div className=\"space-y-2\">\n            <Label htmlFor=\"avatar\">Profile Photo</Label>\n            <div className=\"flex items-center gap-4\">\n              <div className=\"flex h-24 w-24 items-center justify-center rounded-lg border-2 border-dashed\">\n                <Upload className=\"text-muted-foreground h-8 w-8\" />\n              </div>\n              <div className=\"flex-1\">\n                <p className=\"text-muted-foreground text-sm\">\n                  PNG, JPG, JPEG or GIF (max. 800x400px)\n                </p>\n                <Input\n                  id=\"avatar\"\n                  name=\"avatar\"\n                  type=\"file\"\n                  accept=\".png,.jpg,.jpeg,.gif\"\n                  className=\"mt-2\"\n                />\n              </div>\n            </div>\n          </div>\n\n          <div className=\"grid grid-cols-1 gap-6 md:grid-cols-2\">\n            <div className=\"space-y-2\">\n              <Label htmlFor=\"firstName\">First Name</Label>\n              <Input id=\"firstName\" name=\"firstName\" type=\"text\" />\n            </div>\n\n            <div className=\"space-y-2\">\n              <Label htmlFor=\"lastName\">Last Name</Label>\n              <Input id=\"lastName\" name=\"lastName\" type=\"text\" />\n            </div>\n          </div>\n\n          <div className=\"space-y-2\">\n            <Label htmlFor=\"contactEmail\">Contact Email</Label>\n            <Input id=\"contactEmail\" name=\"contactEmail\" type=\"email\" />\n          </div>\n\n          <div className=\"grid grid-cols-1 gap-6 md:grid-cols-2\">\n            <div className=\"space-y-2\">\n              <Label htmlFor=\"userRole\">Role</Label>\n              <Select name=\"userRole\">\n                <SelectTrigger id=\"userRole\" className=\"w-full\">\n                  <SelectValue placeholder=\"Select a role\" />\n                </SelectTrigger>\n                <SelectContent>\n                  <SelectItem value=\"stylist\">Stylist</SelectItem>\n                  <SelectItem value=\"store-manager\">Store Manager</SelectItem>\n                  <SelectItem value=\"creative-lead\">Creative Lead</SelectItem>\n                </SelectContent>\n              </Select>\n            </div>\n\n            <div className=\"space-y-2\">\n              <Label htmlFor=\"languages\">Languages</Label>\n              <Input\n                id=\"languages\"\n                name=\"languages\"\n                type=\"text\"\n                placeholder=\"e.g. English, Italian\"\n              />\n            </div>\n          </div>\n\n          <div className=\"grid grid-cols-1 gap-6 md:grid-cols-2\">\n            <div className=\"space-y-2\">\n              <Label htmlFor=\"jobTitle\">Job Title</Label>\n              <Input\n                id=\"jobTitle\"\n                name=\"jobTitle\"\n                type=\"text\"\n                placeholder=\"e.g. Fashion Consultant\"\n              />\n            </div>\n\n            <div className=\"space-y-2\">\n              <Label htmlFor=\"accountType\">Account Type</Label>\n              <Select name=\"accountType\">\n                <SelectTrigger id=\"accountType\" className=\"w-full\">\n                  <SelectValue placeholder=\"Select account type\" />\n                </SelectTrigger>\n                <SelectContent>\n                  <SelectItem value=\"basic\">Basic</SelectItem>\n                  <SelectItem value=\"pro\">Pro</SelectItem>\n                  <SelectItem value=\"executive\">Executive</SelectItem>\n                </SelectContent>\n              </Select>\n            </div>\n          </div>\n\n          <div className=\"grid grid-cols-1 gap-6 md:grid-cols-2\">\n            <div className=\"space-y-2\">\n              <Label htmlFor=\"permissionLevel\">Permission Level</Label>\n              <Select name=\"permissionLevel\">\n                <SelectTrigger id=\"permissionLevel\" className=\"w-full\">\n                  <SelectValue placeholder=\"Select permission level\" />\n                </SelectTrigger>\n                <SelectContent>\n                  <SelectItem value=\"admin\">Admin</SelectItem>\n                  <SelectItem value=\"operational\">Operational</SelectItem>\n                  <SelectItem value=\"viewer\">Viewer</SelectItem>\n                </SelectContent>\n              </Select>\n            </div>\n\n            <div className=\"space-y-2\">\n              <Label htmlFor=\"emailStatus\">Email Verified</Label>\n              <Input\n                id=\"emailStatus\"\n                name=\"emailStatus\"\n                type=\"text\"\n                value=\"Verified\"\n                disabled\n              />\n            </div>\n          </div>\n\n          <div className=\"flex gap-4\">\n            <Button type=\"button\" variant=\"secondary\" className=\"flex-1\">\n              Upload New Photo\n            </Button>\n            <Button type=\"button\" variant=\"destructive\" className=\"flex-1\">\n              Delete Account\n            </Button>\n          </div>\n        </form>\n      </Card>\n    </section>\n  )\n}\n",
      "type": "registry:page",
      "target": "app/cruds-03/page.tsx"
    }
  ],
  "meta": {
    "iframeHeight": "1200px",
    "container": "w-full bg-surface min-h-svh flex px-4 py-12 items-center md:py-20 justify-center min-w-0",
    "mobile": "component"
  },
  "categories": [
    "cruds"
  ]
}