Glass Button

1import { Slot } from 'radix-ui';
2import { cva, type VariantProps } from 'class-variance-authority';
3 
4import { cn } from '@/lib/utils';
5 
6export const glassButtonVariants = cva(
7  'inline-flex items-center justify-center rounded-full text-sm font-medium transition-colors focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background focus-visible:outline-none',
8  {
9    variants: {
10      variant: {
11        primary:
12          'bg-primary font-semibold text-primary-foreground shadow-[0_8px_24px_rgba(208,114,46,0.30)] hover:bg-[#9d4416] dark:font-medium dark:hover:bg-[#F7B888]',
13        secondary:
14          'border border-border text-body hover:border-ruri hover:text-ruri dark:hover:border-ruri-soft dark:hover:text-ruri-soft',
15        tinted:
16          'border border-ruri/25 bg-ruri/10 text-ruri hover:bg-ruri/20 dark:border-ruri-soft/25 dark:bg-ruri-soft/10 dark:text-ruri-soft dark:hover:bg-ruri-soft/20',
17      },
18      size: {
19        md: 'px-6 py-3',
20        sm: 'px-4 py-2',
21      },
22    },
23    defaultVariants: {
24      variant: 'primary',
25      size: 'md',
26    },
27  },
28);
29 
30export interface GlassButtonProps
31  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
32    VariantProps<typeof glassButtonVariants> {
33  asChild?: boolean;
34}
35 
36export function GlassButton({ variant, size, asChild, className, ...props }: GlassButtonProps) {
37  const Comp = asChild ? Slot.Root : 'button';
38  return <Comp className={cn(glassButtonVariants({ variant, size }), className)} {...props} />;
39}