{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"stepper-with-an-error-step","type":"registry:component","title":"Stepper With an Error Step","description":"","dependencies":[],"files":[{"path":"components/we-inc/stepper-with-an-error-step.tsx","type":"registry:component","content":"import { useState } from \"react\";\n\n// Steps of a domain transfer. `failAt` marks the step that currently has a problem.\nconst steps = [\n  { name: \"Unlock domain\", detail: \"Lock removed at your old registrar\" },\n  { name: \"Auth code\", detail: \"Code accepted\" },\n  { name: \"Payment\", detail: \"One year added on transfer\" },\n  { name: \"Confirm transfer\", detail: \"Takes up to five days\" },\n];\n\nexport default function StepperWithAnErrorStep() {\n  const [current, setCurrent] = useState(2);\n  const [failed, setFailed] = useState(true);\n\n  const status = (i: number) => (i < current ? \"done\" : i === current ? (failed ? \"error\" : \"current\") : \"todo\");\n\n  return (\n    <div className=\"bg-amber-50 px-4 py-12 sm:px-8\">\n      <div className=\"mx-auto max-w-xl rounded-2xl bg-white p-6 shadow-sm ring-1 ring-amber-100 sm:p-8\">\n        <h2 className=\"text-lg font-semibold text-slate-900\">Transfer quietharbour.studio</h2>\n        <ol className=\"mt-6 space-y-3\">\n          {steps.map((s, i) => {\n            const st = status(i);\n            return (\n              <li key={s.name} aria-current={i === current ? \"step\" : undefined} className={`flex items-start gap-3 rounded-xl p-3 ${st === \"error\" ? \"bg-red-50 ring-1 ring-red-200\" : st === \"current\" ? \"bg-amber-50 ring-1 ring-amber-200\" : \"\"}`}>\n                <span aria-hidden=\"true\" className={`grid h-7 w-7 shrink-0 place-items-center rounded-full text-xs font-bold ${st === \"done\" ? \"bg-teal-600 text-white\" : st === \"error\" ? \"bg-red-600 text-white\" : st === \"current\" ? \"bg-amber-500 text-white\" : \"bg-slate-100 text-slate-600\"}`}>\n                  {st === \"done\" ? (\n                    <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"3\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><path d=\"M5 12l5 5 9-10\" /></svg>\n                  ) : st === \"error\" ? (\n                    <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"3\" strokeLinecap=\"round\"><path d=\"M12 7v6M12 17h.01\" /></svg>\n                  ) : (\n                    i + 1\n                  )}\n                </span>\n                <div className=\"min-w-0 flex-1\">\n                  <p className={`text-sm font-semibold ${st === \"todo\" ? \"text-slate-600\" : st === \"error\" ? \"text-red-800\" : \"text-slate-900\"}`}>\n                    {s.name}\n                    <span className=\"sr-only\">{st === \"done\" ? \", completed\" : st === \"error\" ? \", has an error\" : st === \"current\" ? \", current step\" : \", not started\"}</span>\n                  </p>\n                  {st === \"error\" ? (\n                    <div role=\"alert\">\n                      <p className=\"mt-0.5 text-sm text-red-700\">Your card ending 0732 was declined by the bank.</p>\n                      <button type=\"button\" onClick={() => setFailed(false)} className=\"mt-2 h-10 rounded-lg bg-red-600 px-3 text-sm font-semibold text-white hover:bg-red-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-red-600 focus-visible:ring-offset-2\">Use another card</button>\n                    </div>\n                  ) : st === \"current\" ? (\n                    <div>\n                      <p className=\"mt-0.5 text-sm text-slate-600\">Visa ending 4410 is ready to charge $14.</p>\n                      <button type=\"button\" onClick={() => setCurrent((c) => c + 1)} className=\"mt-2 h-10 rounded-lg bg-amber-500 px-3 text-sm font-semibold text-amber-950 hover:bg-amber-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-amber-600 focus-visible:ring-offset-2\">Pay and continue</button>\n                    </div>\n                  ) : (\n                    st === \"done\" && <p className=\"mt-0.5 text-sm text-slate-600\">{s.detail}</p>\n                  )}\n                </div>\n              </li>\n            );\n          })}\n        </ol>\n        <button type=\"button\" onClick={() => { setCurrent(2); setFailed(true); }} className=\"mt-4 h-10 rounded-lg px-3 text-sm font-medium text-slate-700 hover:bg-slate-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-amber-600\">Replay the declined payment</button>\n      </div>\n    </div>\n  );\n}\n"}]}