{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"recovery-code-1","type":"registry:block","title":"Recovery Code 1","description":"","dependencies":[],"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"],"files":[{"path":"recovery-code.tsx","type":"registry:block","content":"\"use client\"\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 { FancyButton } from \"@/components/fancy-button\"\nimport { Icons } from \"@/components/icons\"\n\nexport function RecoveryCode() {\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\">Recovery Code</h1>\n              <p className=\"text-md text-muted-foreground\">\n                Enter your backup code to verify your identity.\n              </p>\n            </div>\n          </div>\n\n          <form className=\"flex flex-col gap-3\">\n            <Field className=\"gap-1\">\n              <FieldLabel htmlFor=\"recovery-code\" className=\"gap-0\">\n                Recovery Code <span className=\"text-primary\">*</span>\n              </FieldLabel>\n              <Input\n                id=\"recovery-code\"\n                type=\"text\"\n                placeholder=\"1234-5678-9012-3456\"\n                spellCheck={false}\n                autoComplete=\"off\"\n                className=\"h-10\"\n              />\n            </Field>\n\n            <FancyButton type=\"submit\" className=\"h-10\">\n              Verify Code\n            </FancyButton>\n          </form>\n\n          <p className=\"text-center text-sm text-muted-foreground\">\n            <Button type=\"button\" variant=\"link\" className=\"h-auto p-0\">\n              Try another method\n            </Button>\n            {\" · \"}\n            <Button\n              type=\"button\"\n              variant=\"link\"\n              className=\"h-auto p-0 text-foreground\"\n            >\n              Back to login\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;Had to use a recovery code while traveling. The process was{\" \"}\n              <span className=\"font-medium text-primary\">straightforward</span>{\" \"}\n              — back in my account in under a minute.&rdquo;\n            </p>\n            <div className=\"flex items-center gap-3\">\n              <Avatar className=\"size-10\">\n                <AvatarImage\n                  src=\"https://github.com/pacocoursey.png\"\n                  alt=\"Paco Coursey\"\n                />\n                <AvatarFallback>P</AvatarFallback>\n              </Avatar>\n              <div>\n                <p className=\"text-sm font-semibold\">Paco Coursey</p>\n                <p className=\"text-xs text-muted-foreground\">Engineer</p>\n              </div>\n            </div>\n          </div>\n        </div>\n      </section>\n    </main>\n  )\n}","target":"components/recovery-code.tsx"}]}