{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"sign-up-1","type":"registry:block","title":"Sign Up 1","description":"","dependencies":["lucide-react"],"registryDependencies":["https://www.diarmuradi.com/r/styles/base-nova/avatar.json","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 {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\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 } from 'lucide-react'\n\nconst socials = [\n  { icon: Icons.Google, name: \"google\" },\n  { icon: Icons.Apple, name: \"apple\" },\n  { icon: Icons.GitHub, name: \"github\" },\n]\n\nexport function SignUp() {\n  const [showPassword, setShowPassword] = useState(false)\n\n  return (\n    <main className=\"w-full max-w-xl rounded-4xl lg:max-w-4xl lg:bg-muted lg:p-1\">\n      <section className=\"grid grid-cols-1 lg:grid-cols-2\">\n        <div className=\"flex flex-col gap-6 rounded-3xl bg-card p-6 shadow-elevated-lg\">\n          <div className=\"flex flex-col items-center gap-4\">\n            <FancyButton\n              type=\"button\"\n              size=\"icon-lg\"\n              className=\"size-14 rounded-xl\"\n              aria-label=\"Home\"\n            >\n              <Icons.Logo className=\"size-10\" />\n            </FancyButton>\n            <div className=\"text-center\">\n              <h1 className=\"text-xl font-semibold\">Create your account</h1>\n              <p className=\"text-md text-muted-foreground\">\n                Get started in just a few steps.\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=\"secondary\">\n                <Icon />\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 with</span>\n          </div>\n\n          <form className=\"flex flex-col gap-3\">\n            <Field className=\"gap-1\">\n              <FieldLabel htmlFor=\"name\" className=\"gap-0\">\n                Full Name <span className=\"text-primary\">*</span>\n              </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\" className=\"gap-0\">\n                Email <span className=\"text-primary\">*</span>\n              </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\" className=\"gap-0\">\n                Password <span className=\"text-primary\">*</span>\n              </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={\n                      showPassword ? \"Hide password\" : \"Show password\"\n                    }\n                  >\n                    {showPassword ? <EyeOffIcon /> : <EyeIcon />}\n                  </InputGroupButton>\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n\n            <FancyButton type=\"submit\" className=\"h-10\">\n              Create Account\n            </FancyButton>\n          </form>\n\n          <p className=\"text-center text-sm text-muted-foreground\">\n            Already have an account?{\" \"}\n            <Button type=\"button\" variant=\"link\" className=\"h-auto p-0\">\n              Sign in\n            </Button>\n          </p>\n        </div>\n\n        <div className=\"hidden lg:flex lg:flex-col lg:justify-end lg:p-12\">\n          <div className=\"mt-auto flex flex-col gap-6\">\n            <p className=\"text-lg leading-relaxed\">\n              &ldquo;Signing up took less than 30 seconds. I was{\" \"}\n              <span className=\"font-medium text-primary\">in my dashboard</span>{\" \"}\n              before my coffee even cooled down.&rdquo;\n            </p>\n            <div className=\"flex items-center gap-3\">\n              <Avatar className=\"size-10\">\n                <AvatarImage\n                  src=\"https://github.com/leerob.png\"\n                  alt=\"Lee Robinson\"\n                />\n                <AvatarFallback>L</AvatarFallback>\n              </Avatar>\n              <div>\n                <p className=\"text-sm font-semibold\">Lee Robinson</p>\n                <p className=\"text-xs text-muted-foreground\">VP of DevRel</p>\n              </div>\n            </div>\n          </div>\n        </div>\n      </section>\n    </main>\n  )\n}","target":"components/sign-up.tsx"}]}