diff options
Diffstat (limited to 'cmd/mirum-server/web/components/ui/field.tsx')
| -rw-r--r-- | cmd/mirum-server/web/components/ui/field.tsx | 74 | +37 −37 |
1 files changed, 37 insertions, 37 deletions
diff --git a/cmd/mirum-server/web/components/ui/field.tsx b/cmd/mirum-server/web/components/ui/field.tsx index ef12592..9517f55 100644 --- a/cmd/mirum-server/web/components/ui/field.tsx +++ b/cmd/mirum-server/web/components/ui/field.tsx @@ -1,12 +1,12 @@ -// SPDX-FileCopyrightText: 2023 shadcn +// Copyright (c) 2023 shadcn // SPDX-License-Identifier: MIT -import { useMemo } from "react"; -import { cva, type VariantProps } from "class-variance-authority"; +import { useMemo } from "react" +import { cva, type VariantProps } from "class-variance-authority" -import { cn } from "@/lib/utils"; -import { Label } from "@/components/ui/label"; -import { Separator } from "@/components/ui/separator"; +import { cn } from "@/lib/utils" +import { Label } from "@/components/ui/label" +import { Separator } from "@/components/ui/separator" function FieldSet({ className, ...props }: React.ComponentProps<"fieldset">) { return ( @@ -14,11 +14,11 @@ function FieldSet({ className, ...props }: React.ComponentProps<"fieldset">) { data-slot="field-set" className={cn( "flex flex-col gap-6 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3", - className, + className )} {...props} /> - ); + ) } function FieldLegend({ @@ -32,11 +32,11 @@ function FieldLegend({ data-variant={variant} className={cn( "mb-3 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base", - className, + className )} {...props} /> - ); + ) } function FieldGroup({ className, ...props }: React.ComponentProps<"div">) { @@ -45,11 +45,11 @@ function FieldGroup({ className, ...props }: React.ComponentProps<"div">) { data-slot="field-group" className={cn( "group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4", - className, + className )} {...props} /> - ); + ) } const fieldVariants = cva( @@ -67,8 +67,8 @@ const fieldVariants = cva( defaultVariants: { orientation: "vertical", }, - }, -); + } +) function Field({ className, @@ -83,7 +83,7 @@ function Field({ className={cn(fieldVariants({ orientation }), className)} {...props} /> - ); + ) } function FieldContent({ className, ...props }: React.ComponentProps<"div">) { @@ -92,11 +92,11 @@ function FieldContent({ className, ...props }: React.ComponentProps<"div">) { data-slot="field-content" className={cn( "group/field-content flex flex-1 flex-col gap-1 leading-snug", - className, + className )} {...props} /> - ); + ) } function FieldLabel({ @@ -109,11 +109,11 @@ function FieldLabel({ className={cn( "group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-data-checked:border-primary/30 has-data-checked:bg-primary/5 has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border *:data-[slot=field]:p-3 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10", "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col", - className, + className )} {...props} /> - ); + ) } function FieldTitle({ className, ...props }: React.ComponentProps<"div">) { @@ -122,11 +122,11 @@ function FieldTitle({ className, ...props }: React.ComponentProps<"div">) { data-slot="field-label" className={cn( "flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50", - className, + className )} {...props} /> - ); + ) } function FieldDescription({ className, ...props }: React.ComponentProps<"p">) { @@ -137,11 +137,11 @@ function FieldDescription({ className, ...props }: React.ComponentProps<"p">) { "text-start text-sm leading-normal font-normal text-muted-foreground group-has-data-horizontal/field:text-balance [[data-variant=legend]+&]:-mt-1.5", "last:mt-0 nth-last-2:-mt-1", "[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary", - className, + className )} {...props} /> - ); + ) } function FieldSeparator({ @@ -149,7 +149,7 @@ function FieldSeparator({ className, ...props }: React.ComponentProps<"div"> & { - children?: React.ReactNode; + children?: React.ReactNode }) { return ( <div @@ -157,7 +157,7 @@ function FieldSeparator({ data-content={!!children} className={cn( "relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2", - className, + className )} {...props} > @@ -171,7 +171,7 @@ function FieldSeparator({ </span> )} </div> - ); + ) } function FieldError({ @@ -180,37 +180,37 @@ function FieldError({ errors, ...props }: React.ComponentProps<"div"> & { - errors?: ({ message?: string } | undefined)[]; + errors?: Array<{ message?: string } | undefined> }) { const content = useMemo(() => { if (children) { - return children; + return children } if (!errors?.length) { - return null; + return null } const uniqueErrors = [ ...new Map(errors.map((error) => [error?.message, error])).values(), - ]; + ] if (uniqueErrors?.length == 1) { - return uniqueErrors[0]?.message; + return uniqueErrors[0]?.message } return ( <ul className="ms-4 flex list-disc flex-col gap-1"> {uniqueErrors.map( (error, index) => - error?.message && <li key={index}>{error.message}</li>, + error?.message && <li key={index}>{error.message}</li> )} </ul> - ); - }, [children, errors]); + ) + }, [children, errors]) if (!content) { - return null; + return null } return ( @@ -222,7 +222,7 @@ function FieldError({ > {content} </div> - ); + ) } export { @@ -236,4 +236,4 @@ export { FieldSet, FieldContent, FieldTitle, -}; +} |