diff options
Diffstat (limited to 'frontend/components/ui/button.tsx')
| -rw-r--r-- | frontend/components/ui/button.tsx | 59 |
1 files changed, 59 insertions, 0 deletions
diff --git a/frontend/components/ui/button.tsx b/frontend/components/ui/button.tsx new file mode 100644 index 0000000..a2df8dc --- /dev/null +++ b/frontend/components/ui/button.tsx | |||
| @@ -0,0 +1,59 @@ | |||
| 1 | import * as React from "react" | ||
| 2 | import { Slot } from "@radix-ui/react-slot" | ||
| 3 | import { cva, type VariantProps } from "class-variance-authority" | ||
| 4 | |||
| 5 | import { cn } from "@/lib/utils" | ||
| 6 | |||
| 7 | const buttonVariants = cva( | ||
| 8 | "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", | ||
| 9 | { | ||
| 10 | variants: { | ||
| 11 | variant: { | ||
| 12 | default: | ||
| 13 | "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90", | ||
| 14 | destructive: | ||
| 15 | "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60", | ||
| 16 | outline: | ||
| 17 | "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50", | ||
| 18 | secondary: | ||
| 19 | "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80", | ||
| 20 | ghost: | ||
| 21 | "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50", | ||
| 22 | link: "text-primary underline-offset-4 hover:underline", | ||
| 23 | }, | ||
| 24 | size: { | ||
| 25 | default: "h-9 px-4 py-2 has-[>svg]:px-3", | ||
| 26 | sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5", | ||
| 27 | lg: "h-10 rounded-md px-6 has-[>svg]:px-4", | ||
| 28 | icon: "size-9", | ||
| 29 | }, | ||
| 30 | }, | ||
| 31 | defaultVariants: { | ||
| 32 | variant: "default", | ||
| 33 | size: "default", | ||
| 34 | }, | ||
| 35 | } | ||
| 36 | ) | ||
| 37 | |||
| 38 | function Button({ | ||
| 39 | className, | ||
| 40 | variant, | ||
| 41 | size, | ||
| 42 | asChild = false, | ||
| 43 | ...props | ||
| 44 | }: React.ComponentProps<"button"> & | ||
| 45 | VariantProps<typeof buttonVariants> & { | ||
| 46 | asChild?: boolean | ||
| 47 | }) { | ||
| 48 | const Comp = asChild ? Slot : "button" | ||
| 49 | |||
| 50 | return ( | ||
| 51 | <Comp | ||
| 52 | data-slot="button" | ||
| 53 | className={cn(buttonVariants({ variant, size, className }))} | ||
| 54 | {...props} | ||
| 55 | /> | ||
| 56 | ) | ||
| 57 | } | ||
| 58 | |||
| 59 | export { Button, buttonVariants } | ||
