{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "account-basic-info-01",
  "type": "registry:block",
  "description": "Personal information management form",
  "dependencies": [
    "date-fns"
  ],
  "registryDependencies": [
    "button",
    "card",
    "input",
    "label",
    "select",
    "calendar",
    "popover"
  ],
  "files": [
    {
      "path": "creative-tim-ui/blocks/account-basic-info-01/page.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { format } from \"date-fns\"\nimport {\n  Briefcase,\n  CalendarIcon,\n  Globe,\n  GraduationCap,\n  Mail,\n  MapPin,\n  Phone,\n  User,\n} from \"lucide-react\"\n\nimport { Button } from \"@/components/ui/button\"\nimport { Calendar } from \"@/components/ui/calendar\"\nimport { Card } from \"@/components/ui/card\"\nimport { Input } from \"@/components/ui/input\"\nimport { Label } from \"@/components/ui/label\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/components/ui/popover\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/components/ui/select\"\n\nexport default function AccountBasicInfo01() {\n  const [birthDate, setBirthDate] = React.useState<Date>()\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          <h2 className=\"text-2xl font-semibold tracking-tight\">\n            Personal Information\n          </h2>\n          <p className=\"text-muted-foreground mt-2 text-sm\">\n            Manage your personal details and profile information. This\n            information will be visible to other users on the platform.\n          </p>\n        </div>\n\n        <form className=\"space-y-8\">\n          {/* Basic Details Section */}\n          <div className=\"space-y-6\">\n            <div>\n              <h3 className=\"mb-4 text-sm font-medium\">Basic Details</h3>\n              <div className=\"grid grid-cols-1 gap-4 sm:grid-cols-2\">\n                <div className=\"space-y-2\">\n                  <Label\n                    htmlFor=\"firstName\"\n                    className=\"flex items-center gap-2\"\n                  >\n                    <User className=\"text-muted-foreground h-4 w-4\" />\n                    First Name\n                  </Label>\n                  <Input\n                    id=\"firstName\"\n                    placeholder=\"Emma\"\n                    defaultValue=\"Emma\"\n                  />\n                </div>\n                <div className=\"space-y-2\">\n                  <Label htmlFor=\"lastName\" className=\"flex items-center gap-2\">\n                    <User className=\"text-muted-foreground h-4 w-4\" />\n                    Last Name\n                  </Label>\n                  <Input\n                    id=\"lastName\"\n                    placeholder=\"Roberts\"\n                    defaultValue=\"Roberts\"\n                  />\n                </div>\n              </div>\n            </div>\n\n            {/* Professional Information */}\n            <div>\n              <h3 className=\"mb-4 text-sm font-medium\">\n                Professional Information\n              </h3>\n              <div className=\"grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n                <div className=\"space-y-2\">\n                  <Label htmlFor=\"gender\" className=\"flex items-center gap-2\">\n                    <User className=\"text-muted-foreground h-4 w-4\" />\n                    Gender\n                  </Label>\n                  <Select defaultValue=\"female\">\n                    <SelectTrigger id=\"gender\">\n                      <SelectValue placeholder=\"Select Gender\" />\n                    </SelectTrigger>\n                    <SelectContent>\n                      <SelectItem value=\"male\">Male</SelectItem>\n                      <SelectItem value=\"female\">Female</SelectItem>\n                      <SelectItem value=\"other\">Other</SelectItem>\n                      <SelectItem value=\"prefer-not-to-say\">\n                        Prefer not to say\n                      </SelectItem>\n                    </SelectContent>\n                  </Select>\n                </div>\n\n                <div className=\"space-y-2\">\n                  <Label className=\"flex items-center gap-2\">\n                    <CalendarIcon className=\"text-muted-foreground h-4 w-4\" />\n                    Birth Date\n                  </Label>\n                  <Popover>\n                    <PopoverTrigger asChild>\n                      <Button\n                        variant=\"outline\"\n                        className=\"w-full justify-start text-left font-normal\"\n                      >\n                        <CalendarIcon className=\"mr-2 h-4 w-4\" />\n                        {birthDate ? format(birthDate, \"PPP\") : \"Select a date\"}\n                      </Button>\n                    </PopoverTrigger>\n                    <PopoverContent className=\"w-auto p-0\" align=\"start\">\n                      <Calendar\n                        mode=\"single\"\n                        selected={birthDate}\n                        onSelect={setBirthDate}\n                        initialFocus\n                      />\n                    </PopoverContent>\n                  </Popover>\n                </div>\n\n                <div className=\"space-y-2\">\n                  <Label\n                    htmlFor=\"profession\"\n                    className=\"flex items-center gap-2\"\n                  >\n                    <Briefcase className=\"text-muted-foreground h-4 w-4\" />\n                    Profession\n                  </Label>\n                  <Select defaultValue=\"ui-ux\">\n                    <SelectTrigger id=\"profession\">\n                      <SelectValue placeholder=\"Select Profession\" />\n                    </SelectTrigger>\n                    <SelectContent>\n                      <SelectItem value=\"ui-ux\">UI/UX Designer</SelectItem>\n                      <SelectItem value=\"frontend\">\n                        Frontend Developer\n                      </SelectItem>\n                      <SelectItem value=\"backend\">Backend Developer</SelectItem>\n                      <SelectItem value=\"fullstack\">\n                        Fullstack Developer\n                      </SelectItem>\n                      <SelectItem value=\"product-manager\">\n                        Product Manager\n                      </SelectItem>\n                      <SelectItem value=\"data-scientist\">\n                        Data Scientist\n                      </SelectItem>\n                    </SelectContent>\n                  </Select>\n                </div>\n\n                <div className=\"space-y-2\">\n                  <Label\n                    htmlFor=\"education\"\n                    className=\"flex items-center gap-2\"\n                  >\n                    <GraduationCap className=\"text-muted-foreground h-4 w-4\" />\n                    Education\n                  </Label>\n                  <Select defaultValue=\"university\">\n                    <SelectTrigger id=\"education\">\n                      <SelectValue placeholder=\"Select Level\" />\n                    </SelectTrigger>\n                    <SelectContent>\n                      <SelectItem value=\"high-school\">High School</SelectItem>\n                      <SelectItem value=\"college\">College</SelectItem>\n                      <SelectItem value=\"university\">University</SelectItem>\n                      <SelectItem value=\"masters\">\n                        Master&apos;s Degree\n                      </SelectItem>\n                      <SelectItem value=\"phd\">Ph.D.</SelectItem>\n                    </SelectContent>\n                  </Select>\n                </div>\n              </div>\n            </div>\n\n            {/* Contact Information */}\n            <div>\n              <h3 className=\"mb-4 text-sm font-medium\">Contact Information</h3>\n              <div className=\"grid grid-cols-1 gap-4 sm:grid-cols-2\">\n                <div className=\"space-y-2\">\n                  <Label htmlFor=\"email\" className=\"flex items-center gap-2\">\n                    <Mail className=\"text-muted-foreground h-4 w-4\" />\n                    Email Address\n                  </Label>\n                  <Input\n                    id=\"email\"\n                    type=\"email\"\n                    placeholder=\"emma@mail.com\"\n                    defaultValue=\"emma@mail.com\"\n                  />\n                </div>\n                <div className=\"space-y-2\">\n                  <Label\n                    htmlFor=\"confirmEmail\"\n                    className=\"flex items-center gap-2\"\n                  >\n                    <Mail className=\"text-muted-foreground h-4 w-4\" />\n                    Confirm Email\n                  </Label>\n                  <Input\n                    id=\"confirmEmail\"\n                    type=\"email\"\n                    placeholder=\"emma@mail.com\"\n                    defaultValue=\"emma@mail.com\"\n                  />\n                </div>\n                <div className=\"space-y-2\">\n                  <Label htmlFor=\"phone\" className=\"flex items-center gap-2\">\n                    <Phone className=\"text-muted-foreground h-4 w-4\" />\n                    Phone Number\n                  </Label>\n                  <Input\n                    id=\"phone\"\n                    placeholder=\"+1 (555) 123-4567\"\n                    defaultValue=\"+1 (555) 123-4567\"\n                  />\n                </div>\n                <div className=\"space-y-2\">\n                  <Label htmlFor=\"location\" className=\"flex items-center gap-2\">\n                    <MapPin className=\"text-muted-foreground h-4 w-4\" />\n                    Location\n                  </Label>\n                  <Input\n                    id=\"location\"\n                    placeholder=\"City, Country\"\n                    defaultValue=\"Florida, USA\"\n                  />\n                </div>\n              </div>\n            </div>\n\n            {/* Additional Information */}\n            <div>\n              <h3 className=\"mb-4 text-sm font-medium\">\n                Additional Information\n              </h3>\n              <div className=\"grid grid-cols-1 gap-4 sm:grid-cols-2\">\n                <div className=\"space-y-2\">\n                  <Label htmlFor=\"language\" className=\"flex items-center gap-2\">\n                    <Globe className=\"text-muted-foreground h-4 w-4\" />\n                    Preferred Language\n                  </Label>\n                  <Select defaultValue=\"english\">\n                    <SelectTrigger id=\"language\">\n                      <SelectValue placeholder=\"Select Language\" />\n                    </SelectTrigger>\n                    <SelectContent>\n                      <SelectItem value=\"english\">English</SelectItem>\n                      <SelectItem value=\"spanish\">Spanish</SelectItem>\n                      <SelectItem value=\"french\">French</SelectItem>\n                      <SelectItem value=\"german\">German</SelectItem>\n                      <SelectItem value=\"chinese\">Chinese</SelectItem>\n                    </SelectContent>\n                  </Select>\n                </div>\n                <div className=\"space-y-2\">\n                  <Label htmlFor=\"timezone\" className=\"flex items-center gap-2\">\n                    <Globe className=\"text-muted-foreground h-4 w-4\" />\n                    Timezone\n                  </Label>\n                  <Select defaultValue=\"est\">\n                    <SelectTrigger id=\"timezone\">\n                      <SelectValue placeholder=\"Select Timezone\" />\n                    </SelectTrigger>\n                    <SelectContent>\n                      <SelectItem value=\"est\">Eastern Time (ET)</SelectItem>\n                      <SelectItem value=\"cst\">Central Time (CT)</SelectItem>\n                      <SelectItem value=\"mst\">Mountain Time (MT)</SelectItem>\n                      <SelectItem value=\"pst\">Pacific Time (PT)</SelectItem>\n                      <SelectItem value=\"utc\">UTC</SelectItem>\n                    </SelectContent>\n                  </Select>\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <div className=\"flex justify-end gap-3 border-t pt-6\">\n            <Button type=\"button\" variant=\"outline\">\n              Cancel\n            </Button>\n            <Button type=\"submit\">Save Changes</Button>\n          </div>\n        </form>\n      </Card>\n    </div>\n  )\n}\n",
      "type": "registry:page",
      "target": "app/account-basic-info/page.tsx"
    }
  ],
  "meta": {
    "iframeHeight": "1000px",
    "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"
  ]
}