| 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({ |
| 13 | confirm, |
| 14 | id, |
| 15 | ...input |
| 16 | }: { confirm: string; id?: string } & ComponentProps<typeof TextInput>) { |
| 17 | const fallback = useId(); |
| 18 | const field = id ?? `${fallback}-confirm`; |
| 19 | return ( |
| 20 | <FormField> |
| 21 | <FieldLabel htmlFor={field} className="block leading-relaxed select-text"> |
| 22 | Type{" "} |
| 23 | <span className="rounded bg-raised px-1 py-0.5 font-mono text-[0.8125rem] break-all text-fg select-all"> |
| 24 | {confirm} |
| 25 | </span>{" "} |
| 26 | to confirm |
| 27 | </FieldLabel> |
| 28 | <TextInput |
| 29 | id={field} |
| 30 | name="confirm" |
| 31 | spellCheck={false} |
| 32 | autoCapitalize="off" |
| 33 | autoComplete="off" |
| 34 | className="font-mono" |
| 35 | {...input} |
| 36 | /> |
| 37 | </FormField> |
| 38 | ); |
| 39 | } |