{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"two-factor-1","type":"registry:block","title":"Two Factor 1","description":"","dependencies":["input-otp","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/icons.json","https://www.diarmuradi.com/r/styles/base-nova/input-group.json","https://www.diarmuradi.com/r/styles/base-nova/input-otp.json"],"files":[{"path":"two-factor.tsx","type":"registry:block","content":"\"use client\"\n\nimport { REGEXP_ONLY_DIGITS } from \"input-otp\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"@/components/ui/input-group\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSlot,\n} from \"@/components/ui/input-otp\"\nimport { FancyButton } from \"@/components/fancy-button\"\nimport { Icons } from \"@/components/icons\"\nimport { CopyIcon } from 'lucide-react'\n\nexport function TwoFactor() {\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\">\n                Two-factor authentication\n              </h1>\n              <p className=\"text-md text-muted-foreground\">\n                Add an extra layer of security to your account.\n              </p>\n            </div>\n          </div>\n\n          <div className=\"flex items-start gap-4\">\n            <div className=\"relative shrink-0 p-1\">\n              <div className=\"size-28 overflow-hidden rounded-xl bg-white p-1.5 shadow-elevated-sm sm:size-32\">\n                <Icons.QrCode className=\"size-full\" />\n              </div>\n              <span className=\"pointer-events-none absolute top-0 left-0 size-4 border-t border-l border-border/50\" />\n              <span className=\"pointer-events-none absolute top-0 right-0 size-4 border-t border-r border-border/50\" />\n              <span className=\"pointer-events-none absolute bottom-0 left-0 size-4 border-b border-l border-border/50\" />\n              <span className=\"pointer-events-none absolute right-0 bottom-0 size-4 border-r border-b border-border/50\" />\n            </div>\n            <div className=\"flex min-w-0 flex-1 flex-col gap-2\">\n              <p className=\"text-sm leading-snug text-muted-foreground\">\n                Can&apos;t scan? Enter code manually:\n              </p>\n              <InputGroup className=\"h-10\">\n                <InputGroupInput\n                  readOnly\n                  defaultValue=\"JBSWY3DPEHPK3PXP\"\n                  className=\"font-mono text-xs\"\n                />\n                <InputGroupAddon align=\"inline-end\">\n                  <InputGroupButton\n                    type=\"button\"\n                    size=\"icon-xs\"\n                    aria-label=\"Copy code\"\n                  >\n                    <CopyIcon />\n                  </InputGroupButton>\n                </InputGroupAddon>\n              </InputGroup>\n            </div>\n          </div>\n\n          <form className=\"flex flex-col gap-3\">\n            <InputOTP\n              maxLength={5}\n              pattern={REGEXP_ONLY_DIGITS}\n              containerClassName=\"w-full\"\n            >\n              <InputOTPGroup className=\"flex w-full gap-2 *:aspect-square *:h-auto *:min-h-0 *:flex-1 *:rounded-lg *:border-l *:text-lg md:*:rounded-xl md:*:text-2xl *:[&_.cn-input-otp-caret-line]:h-[1em] md:*:[&_.cn-input-otp-caret-line]:h-[1.25em]\">\n                <InputOTPSlot index={0} />\n                <InputOTPSlot index={1} />\n                <InputOTPSlot index={2} />\n                <InputOTPSlot index={3} />\n                <InputOTPSlot index={4} />\n              </InputOTPGroup>\n            </InputOTP>\n\n            <FancyButton type=\"submit\" className=\"h-10\">\n              Enable 2FA\n            </FancyButton>\n          </form>\n\n          <p className=\"text-center text-sm text-muted-foreground\">\n            Lost your device?{\" \"}\n            <Button type=\"button\" variant=\"link\" className=\"h-auto p-0\">\n              Use a recovery code\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;Two-factor auth felt like a feature,{\" \"}\n              <span className=\"font-medium text-primary\">not friction</span>. My\n              whole team onboarded in an afternoon.&rdquo;\n            </p>\n            <div className=\"flex items-center gap-3\">\n              <Avatar className=\"size-10\">\n                <AvatarImage\n                  src=\"https://github.com/evilrabbit.png\"\n                  alt=\"Evil Rabbit\"\n                />\n                <AvatarFallback>E</AvatarFallback>\n              </Avatar>\n              <div>\n                <p className=\"text-sm font-semibold\">Evil Rabbit</p>\n                <p className=\"text-xs text-muted-foreground\">Design engineer</p>\n              </div>\n            </div>\n          </div>\n        </div>\n      </section>\n    </main>\n  )\n}","target":"components/two-factor.tsx"}]}