| 1 | import { type ComponentProps, useId } from "react"; |
| 2 | |
| 3 | import { FieldLabel, Field as FormField } from "./ui/field"; |
| 4 | import { Input as TextInput } from "./ui/input"; |
| 5 | |
| 6 | /** |
| 7 | * "Type acme/web to confirm", above the box it is typed in. The words run |
| 8 | * as one sentence that wraps however long the name is (a label is a flex |
| 9 | * row otherwise, which split them into columns), and one click selects |
| 10 | * the name to copy it. |
| 11 | */ |
| 12 | export function ConfirmName({ confirm, id, ...input }: { confirm: string; id?: string } & ComponentProps<typeof TextInput>) { |
| 13 | const fallback = useId(); |
| 14 | const field = id ?? `${fallback}-confirm`; |
| 15 | return ( |
| 16 | <FormField> |
| 17 | <FieldLabel htmlFor={field} className="block leading-relaxed select-text"> |
| 18 | Type <span className="rounded bg-raised px-1 py-0.5 font-mono text-[0.8125rem] break-all text-fg select-all">{confirm}</span> to confirm |
| 19 | </FieldLabel> |
| 20 | <TextInput id={field} name="confirm" spellCheck={false} autoCapitalize="off" autoComplete="off" className="font-mono" {...input} /> |
| 21 | </FormField> |
| 22 | ); |
| 23 | } |