{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "account-avatar-upload-01",
  "type": "registry:block",
  "description": "Profile avatar upload and management",
  "registryDependencies": [
    "button",
    "card"
  ],
  "files": [
    {
      "path": "creative-tim-ui/blocks/account-avatar-upload-01/page.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  CheckCircle2,\n  Pencil,\n  Trash2,\n  Upload,\n  User,\n  XCircle,\n} from \"lucide-react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Card } from \"@/components/ui/card\"\nimport { Label } from \"@/components/ui/label\"\nimport { Switch } from \"@/components/ui/switch\"\n\nexport default function AccountAvatarUpload01() {\n  const [status, setStatus] = React.useState(\"Online\")\n  const [avatarPreview, setAvatarPreview] = React.useState<string | null>(null)\n\n  const handleFileUpload = (event: React.ChangeEvent<HTMLInputElement>) => {\n    const file = event.target.files?.[0]\n    if (file) {\n      const reader = new FileReader()\n      reader.onloadend = () => {\n        setAvatarPreview(reader.result as string)\n      }\n      reader.readAsDataURL(file)\n    }\n  }\n\n  const handleRemoveAvatar = () => {\n    setAvatarPreview(null)\n  }\n\n  return (\n    <div className=\"mx-auto max-w-5xl p-6\">\n      <Card className=\"bg-card border p-8\">\n        <div className=\"mb-8 border-b pb-6\">\n          <div className=\"flex items-center gap-3\">\n            <div className=\"bg-primary/10 flex h-12 w-12 items-center justify-center rounded-lg\">\n              <User className=\"text-primary h-6 w-6\" />\n            </div>\n            <div>\n              <h2 className=\"text-2xl font-semibold tracking-tight\">\n                Profile Picture\n              </h2>\n              <p className=\"text-muted-foreground mt-1 text-sm\">\n                Update your profile picture and personal information\n              </p>\n            </div>\n          </div>\n        </div>\n\n        <div className=\"flex flex-wrap items-center justify-between gap-6\">\n          <div className=\"flex items-center gap-6\">\n            <div className=\"flex items-center gap-4\">\n              <div className=\"relative\">\n                <Avatar className=\"border-border h-16 w-16 border-2\">\n                  <AvatarImage\n                    src={\n                      avatarPreview ||\n                      \"https://v3.material-tailwind.com/woman-profile-1.jpg\"\n                    }\n                    alt=\"Profile Picture\"\n                    className=\"object-cover\"\n                  />\n                  <AvatarFallback className=\"bg-muted-foreground/10 text-muted-foreground\">\n                    <User className=\"h-8 w-8\" />\n                  </AvatarFallback>\n                </Avatar>\n                <label\n                  htmlFor=\"avatar-upload\"\n                  className=\"absolute right-0 bottom-0 cursor-pointer\"\n                >\n                  <div className=\"bg-primary/10 text-primary hover:bg-primary/20 border-border rounded-full border p-1.5\">\n                    <Pencil className=\"h-3.5 w-3.5\" />\n                  </div>\n                  <input\n                    type=\"file\"\n                    id=\"avatar-upload\"\n                    accept=\"image/png,image/jpeg,image/svg+xml\"\n                    className=\"hidden\"\n                    onChange={handleFileUpload}\n                  />\n                </label>\n              </div>\n\n              <div className=\"space-y-1\">\n                <h3 className=\"font-semibold\">Select and Upload Image</h3>\n                <p className=\"text-muted-foreground text-sm\">\n                  .svg, .png, .jpg (size 400x400px)\n                </p>\n              </div>\n            </div>\n\n            <div className=\"flex items-center gap-3\">\n              <Button>\n                <Upload className=\"mr-2 h-4 w-4\" />\n                Upload Avatar\n              </Button>\n              {avatarPreview && (\n                <Button variant=\"destructive\" onClick={handleRemoveAvatar}>\n                  <Trash2 className=\"mr-2 h-4 w-4\" />\n                  Remove\n                </Button>\n              )}\n            </div>\n          </div>\n\n          <div className=\"flex flex-col\">\n            <Label className=\"mb-3 flex items-center gap-2\">\n              <CheckCircle2 className=\"text-muted-foreground h-4 w-4\" />\n              Availability Status\n            </Label>\n            <div className=\"flex items-center gap-3\">\n              <Switch\n                id=\"status\"\n                checked={status === \"Online\"}\n                onCheckedChange={() =>\n                  setStatus((cur) => (cur === \"Online\" ? \"Offline\" : \"Online\"))\n                }\n              />\n              <Label\n                htmlFor=\"status\"\n                className=\"flex cursor-pointer items-center gap-2\"\n              >\n                {status === \"Online\" ? (\n                  <CheckCircle2 className=\"h-4 w-4 text-green-500\" />\n                ) : (\n                  <XCircle className=\"text-muted-foreground h-4 w-4\" />\n                )}\n                {status}\n              </Label>\n            </div>\n          </div>\n        </div>\n\n        <div className=\"bg-muted/50 mt-6 rounded-lg border p-4\">\n          <div className=\"flex items-start gap-3\">\n            <CheckCircle2 className=\"mt-0.5 h-5 w-5 text-blue-500\" />\n            <div>\n              <h4 className=\"mb-1 text-sm font-medium\">Profile Picture Tips</h4>\n              <p className=\"text-muted-foreground text-sm\">\n                Choose a high-quality, professional image that clearly shows\n                your face. Recommended image size is 400x400 pixels. Only .svg,\n                .png, and .jpg formats are supported.\n              </p>\n            </div>\n          </div>\n        </div>\n      </Card>\n    </div>\n  )\n}\n",
      "type": "registry:page",
      "target": "app/account-avatar-upload/page.tsx"
    }
  ],
  "meta": {
    "iframeHeight": "600px",
    "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": [
    "account"
  ]
}