g1t/apps/web/app/components/ui/field.tsx
Pick any line to see why it is the way it is: the commit, the pull request and issue it came from, and what the agent was thinking.
| Workspace names and icons, and a component kit for every control | 1 | import type { ComponentProps, ReactNode } from "react"; |
| 2 | ||
| 3 | import { cn } from "../../lib/cn"; | |
| 4 | import { Label } from "./label"; | |
| 5 | ||
| 6 | // shadcn/ui's field: a label, a control, a line of help and an error, | |
| 7 | // spaced the same way on every form. | |
| 8 | // | |
| 9 | // <Field> | |
| 10 | // <FieldLabel htmlFor="name">Name</FieldLabel> | |
| 11 | // <Input id="name" name="name" /> | |
| 12 | // <FieldDescription>Shown on the project page.</FieldDescription> | |
| 13 | // <FieldError>{actionData?.error}</FieldError> | |
| 14 | // </Field> | |
| 15 | // | |
| 16 | // A group of radios or checkboxes goes in a <FieldSet> with a <FieldLegend>. | |
| 17 | ||
| 18 | export function Field({ className, ...props }: ComponentProps<"div">) { | |
| 19 | return <div role="group" className={cn("flex flex-col gap-1.5", className)} {...props} />; | |
| 20 | } | |
| 21 | ||
| 22 | export function FieldLabel({ className, ...props }: ComponentProps<typeof Label>) { | |
| 23 | return <Label className={cn("mb-0", className)} {...props} />; | |
| 24 | } | |
| 25 | ||
| 26 | export function FieldDescription({ className, ...props }: ComponentProps<"p">) { | |
| 27 | return <p className={cn("text-xs leading-relaxed text-faint", className)} {...props} />; | |
| 28 | } | |
| 29 | ||
| 30 | export function FieldError({ className, children, ...props }: ComponentProps<"p"> & { children?: ReactNode }) { | |
| 31 | if (!children) return null; | |
| 32 | return ( | |
| 33 | <p role="alert" className={cn("text-xs text-danger", className)} {...props}> | |
| 34 | {children} | |
| 35 | </p> | |
| 36 | ); | |
| 37 | } | |
| 38 | ||
| 39 | export function FieldSet({ className, ...props }: ComponentProps<"fieldset">) { | |
| 40 | return <fieldset className={cn("flex min-w-0 flex-col gap-3", className)} {...props} />; | |
| 41 | } | |
| 42 | ||
| 43 | export function FieldLegend({ className, ...props }: ComponentProps<"legend">) { | |
| 44 | return <legend className={cn("mb-3 text-sm font-medium text-muted", className)} {...props} />; | |
| 45 | } | |
| 46 | ||
| 47 | export function FieldGroup({ className, ...props }: ComponentProps<"div">) { | |
| 48 | return <div className={cn("flex flex-col gap-6", className)} {...props} />; | |
| 49 | } |