diff options
Diffstat (limited to 'src/components/ui')
| -rw-r--r-- | src/components/ui/button.tsx | 57 | ||||
| -rw-r--r-- | src/components/ui/index.ts | 2 | ||||
| -rw-r--r-- | src/components/ui/input.tsx | 9 | ||||
| -rw-r--r-- | src/components/ui/switch.tsx | 30 |
4 files changed, 98 insertions, 0 deletions
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx new file mode 100644 index 0000000..65c1e84 --- /dev/null +++ b/src/components/ui/button.tsx @@ -0,0 +1,57 @@ +import * as React from 'react'; +import { Slot } from '@radix-ui/react-slot'; +import { cva, type VariantProps } from 'class-variance-authority'; + +import { cn } from '@/lib/utils'; + +const buttonVariants = cva( + 'inline-flex items-center justify-center gap-2 whitespace-nowrap transition-colors duration-200 ease-out', + { + variants: { + variant: { + default: 'bg-violet rounded-4xl hover:bg-light-violet', + outline: '', + ghost: '', + link: 'hover:text-light-violet', + icon: 'bg-violet hover:bg-light-violet rounded-[10px] cursor-pointer', + menu: 'w-[350px] hover:bg-light-violet active:bg-violet active:border-violet rounded-4xl border-2 border-light-violet justify-start', + }, + size: { + sm: 'py-1.75 px-3.75', + default: 'py-2.5 px-7.5', + lg: 'py-2.5 px-7.5 w-full', + icon: 'size-12.5 p-3.75', + text: '', + }, + }, + defaultVariants: { + variant: 'default', + size: 'default', + }, + }, +); + +function Button({ + className, + variant = 'default', + size = 'default', + asChild = false, + ...props +}: React.ComponentProps<'button'> & + VariantProps<typeof buttonVariants> & { + asChild?: boolean; + }) { + const Comp = asChild ? Slot : 'button'; + + return ( + <Comp + data-slot="button" + data-variant={variant} + data-size={size} + className={cn(buttonVariants({ variant, size, className }))} + {...props} + /> + ); +} + +export { Button, buttonVariants }; diff --git a/src/components/ui/index.ts b/src/components/ui/index.ts new file mode 100644 index 0000000..4d2a1a0 --- /dev/null +++ b/src/components/ui/index.ts @@ -0,0 +1,2 @@ +export * from './input'; +export * from './button'; diff --git a/src/components/ui/input.tsx b/src/components/ui/input.tsx new file mode 100644 index 0000000..0424772 --- /dev/null +++ b/src/components/ui/input.tsx @@ -0,0 +1,9 @@ +import { cn } from '@/lib/utils'; +import React from 'react'; + +export function Input({ + className, + ...props +}: React.InputHTMLAttributes<HTMLInputElement>) { + return <input className={cn('outline-none', className)} {...props} />; +} diff --git a/src/components/ui/switch.tsx b/src/components/ui/switch.tsx new file mode 100644 index 0000000..26fe2c3 --- /dev/null +++ b/src/components/ui/switch.tsx @@ -0,0 +1,30 @@ +'use client'; + +import * as React from 'react'; +import * as SwitchPrimitive from '@radix-ui/react-switch'; + +import { cn } from '@/lib/utils'; + +function Switch({ + className, + ...props +}: React.ComponentProps<typeof SwitchPrimitive.Root>) { + return ( + <SwitchPrimitive.Root + data-slot="switch" + className={cn( + 'peer data-[state=checked]:bg-violet data-[state=unchecked]:bg-light-violet focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[18px] w-10 shrink-0 items-center rounded-full border border-transparent transition-all duration-200 ease-out outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50', + className, + )} + {...props} + > + <SwitchPrimitive.Thumb + data-slot="switch-thumb" + className={cn( + 'bg-light-violet data-[state=unchecked]:bg-violet dark:data-[state=checked]:bg-light-violet pointer-events-none block size-3.5 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[22px] data-[state=unchecked]:translate-x-[2px]', + )} + />{' '} + </SwitchPrimitive.Root> + ); +} +export { Switch }; |
