{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"sign-up-2","type":"registry:block","title":"Sign Up 2","description":"","dependencies":["lucide-react"],"registryDependencies":["https://www.diarmuradi.com/r/styles/base-nova/button.json","https://www.diarmuradi.com/r/styles/base-nova/fancy-button.json","https://www.diarmuradi.com/r/styles/base-nova/field.json","https://www.diarmuradi.com/r/styles/base-nova/icons.json","https://www.diarmuradi.com/r/styles/base-nova/input.json","https://www.diarmuradi.com/r/styles/base-nova/input-group.json"],"files":[{"path":"sign-up.tsx","type":"registry:block","content":"\"use client\"\n\nimport { useState } from \"react\"\n\nimport { Button } from \"@/components/ui/button\"\nimport { Field, FieldLabel } from \"@/components/ui/field\"\nimport { Input } from \"@/components/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"@/components/ui/input-group\"\nimport { FancyButton } from \"@/components/fancy-button\"\nimport { Icons } from \"@/components/icons\"\nimport { EyeIcon, EyeOffIcon, PlusIcon } from 'lucide-react'\n\nconst socials = [\n  { icon: Icons.Google, name: \"Google\" },\n  { icon: Icons.Facebook, name: \"Facebook\" },\n]\n\nexport function SignUp() {\n  const [showPassword, setShowPassword] = useState(false)\n\n  return (\n    <main className=\"flex w-full max-w-md flex-col gap-6 rounded-3xl bg-card p-6 shadow-elevated-lg\">\n      <div className=\"flex flex-col items-center gap-4\">\n        <div className=\"relative flex size-14 items-center justify-center\">\n          <div className=\"absolute inset-0 scale-125 rounded-full bg-primary/10 mask-t-from-20% mask-t-to-100%\" />\n          <div className=\"relative z-10 flex size-14 items-center justify-center rounded-full bg-card ring ring-primary/10 ring-inset\">\n            <PlusIcon  className=\"size-6 text-primary\" />\n          </div>\n        </div>\n        <div className=\"text-center\">\n          <h1 className=\"text-xl font-semibold\">Create a new account</h1>\n          <p className=\"text-md text-muted-foreground\">\n            Enter your details to register.\n          </p>\n        </div>\n      </div>\n\n      <div className=\"flex gap-3 *:h-10 *:flex-1 *:[&>svg]:size-5\">\n        {socials.map(({ icon: Icon, name }) => (\n          <Button key={name} type=\"button\" variant=\"outline\">\n            <Icon />\n            {name}\n          </Button>\n        ))}\n      </div>\n\n      <div className=\"relative text-center text-xs text-muted-foreground uppercase before:absolute before:inset-x-0 before:top-1/2 before:h-px before:bg-border/50 before:content-['']\">\n        <span className=\"relative bg-card px-2\">OR</span>\n      </div>\n\n      <form className=\"flex flex-col gap-3\">\n        <Field className=\"gap-1\">\n          <FieldLabel htmlFor=\"name\">Full Name</FieldLabel>\n          <Input\n            id=\"name\"\n            type=\"text\"\n            placeholder=\"Diar Muradi\"\n            className=\"h-10\"\n          />\n        </Field>\n\n        <Field className=\"gap-1\">\n          <FieldLabel htmlFor=\"email\">Email Address</FieldLabel>\n          <Input\n            id=\"email\"\n            type=\"email\"\n            placeholder=\"contact@diarmuradi.com\"\n            className=\"h-10\"\n          />\n        </Field>\n\n        <Field className=\"gap-1\">\n          <FieldLabel htmlFor=\"password\">Password</FieldLabel>\n          <InputGroup className=\"h-10\">\n            <InputGroupInput\n              id=\"password\"\n              type={showPassword ? \"text\" : \"password\"}\n              placeholder=\"••••••••••\"\n              className=\"h-10\"\n            />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton\n                size=\"icon-xs\"\n                type=\"button\"\n                onClick={() => setShowPassword(!showPassword)}\n                aria-label={showPassword ? \"Hide password\" : \"Show password\"}\n              >\n                {showPassword ? <EyeOffIcon /> : <EyeIcon />}\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n\n        <FancyButton type=\"submit\" className=\"h-10\">\n          Register\n        </FancyButton>\n      </form>\n\n      <div className=\"flex items-center justify-center gap-1 text-sm text-muted-foreground\">\n        <span>Returning user?</span>\n        <Button type=\"button\" variant=\"link\" className=\"h-auto p-0\">\n          Log in\n        </Button>\n      </div>\n    </main>\n  )\n}","target":"components/sign-up.tsx"}]}