{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"verification-1","type":"registry:block","title":"Verification 1","description":"","dependencies":["input-otp"],"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-otp.json"],"files":[{"path":"verification.tsx","type":"registry:block","content":"\"use client\"\n\nimport { useEffect, useState } from \"react\"\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  InputOTP,\n  InputOTPGroup,\n  InputOTPSlot,\n} from \"@/components/ui/input-otp\"\nimport { FancyButton } from \"@/components/fancy-button\"\nimport { Icons } from \"@/components/icons\"\n\nexport function Verification() {\n  const [countdown, setCountdown] = useState(60)\n\n  useEffect(() => {\n    if (countdown <= 0) return\n    const timer = setInterval(() => setCountdown((c) => c - 1), 1000)\n    return () => clearInterval(timer)\n  }, [countdown])\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\">Verify Your Email</h1>\n              <p className=\"text-md text-muted-foreground\">\n                We&apos;ve sent a code to{\" \"}\n                <span className=\"font-medium text-foreground\">\n                  contact@diarmuradi.com\n                </span>\n              </p>\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              Verify\n            </FancyButton>\n          </form>\n\n          <div className=\"flex flex-col items-center gap-2 text-center text-sm text-muted-foreground lg:flex-row\">\n            {countdown > 0 ? (\n              <span>Resend code in {countdown}s</span>\n            ) : (\n              <>\n                <span>Experiencing issues receiving the code?</span>\n                <Button\n                  type=\"button\"\n                  variant=\"link\"\n                  className=\"h-auto p-0\"\n                  onClick={() => setCountdown(60)}\n                >\n                  Resend code\n                </Button>\n              </>\n            )}\n          </div>\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/raunofreiberg.png\"\n                  alt=\"Rauno Freiberg\"\n                />\n                <AvatarFallback>R</AvatarFallback>\n              </Avatar>\n              <div>\n                <p className=\"text-sm font-semibold\">Rauno Freiberg</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/verification.tsx"}]}