veza/apps/web/src/components/ui/card.tsx

import * as React from 'react'
import { cva, type VariantProps } from 'class-variance-authority'

import { cn } from '@/lib/utils'

const cardVariants = cva(
  'flex flex-col rounded-xl border text-card-foreground transition-all relative overflow-hidden',
  {
    variants: {
      variant: {
        default:
          'bg-card shadow-sm',

        elevated:
          'bg-card shadow-lg hover:shadow-xl',

        ghost:
          'bg-transparent border-transparent',

        outline:
          'bg-transparent border-border',

        muted:
          'bg-muted/50 border-transparent',

        glass:
          'glass',

        interactive:
          'bg-card shadow-sm cursor-pointer hover:shadow-lg hover:border-primary/50 hover:-translate-y-0.5',

        glow:
          'bg-card shadow-sm hover:shadow-[0_0_30px_oklch(0.75_0.18_195_/_0.15)] hover:border-primary/50',

        glowMagenta:
          'bg-card shadow-sm hover:shadow-[0_0_30px_oklch(0.65_0.25_330_/_0.15)] hover:border-secondary/50',

        spotlight:
          'bg-black/40 border-white/10 hover:border-white/20 transition-colors',
      },
      padding: {
        none: '',
        sm: 'p-4',
        default: 'p-6',
        lg: 'p-8',
      },
    },
    defaultVariants: {
      variant: 'default',
      padding: 'none',
    },
  },
)

interface CardProps
  extends React.ComponentProps<'div'>,
  VariantProps<typeof cardVariants> {
  spotlight?: boolean;
  spotlightColor?: string;
}

function Card({ className, variant, padding, spotlight, spotlightColor = 'rgba(255, 255, 255, 0.1)', ...props }: CardProps) {
  const divRef = React.useRef<HTMLDivElement>(null);
  const [position, setPosition] = React.useState({ x: 0, y: 0 });
  const [opacity, setOpacity] = React.useState(0);

  const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
    if (!divRef.current || (variant !== 'spotlight' && !spotlight)) return;

    const div = divRef.current;
    const rect = div.getBoundingClientRect();

    setPosition({ x: e.clientX - rect.left, y: e.clientY - rect.top });
  };

  const handleMouseEnter = () => {
    setOpacity(1);
  };

  const handleMouseLeave = () => {
    setOpacity(0);
  };

  const isSpotlight = variant === 'spotlight' || spotlight;

  return (
    <div
      ref={divRef}
      onMouseMove={handleMouseMove}
      onMouseEnter={handleMouseEnter}
      onMouseLeave={handleMouseLeave}
      data-slot="card"
      className={cn(cardVariants({ variant, padding }), className)}
      {...props}
    >
      {isSpotlight && (
        <div
          className="pointer-events-none absolute -inset-px opacity-0 transition duration-300"
          style={{
            opacity,
            background: `radial-gradient(600px circle at ${position.x}px ${position.y}px, ${spotlightColor}, transparent 40%)`,
          }}
        />
      )}
      <div className="relative z-10 w-full h-full flex flex-col">{props.children}</div>
    </div>
  )
}

function CardHeader({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="card-header"
      className={cn(
        'flex flex-col gap-1.5 p-6 pb-0',
        className,
      )}
      {...props}
    />
  )
}

function CardTitle({ className, ...props }: React.ComponentProps<'h3'>) {
  return (
    <h3
      data-slot="card-title"
      className={cn('text-lg font-semibold leading-tight tracking-tight', className)}
      {...props}
    />
  )
}

function CardDescription({ className, ...props }: React.ComponentProps<'p'>) {
  return (
    <p
      data-slot="card-description"
      className={cn('text-sm text-muted-foreground', className)}
      {...props}
    />
  )
}

function CardAction({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="card-action"
      className={cn(
        'absolute top-4 right-4',
        className,
      )}
      {...props}
    />
  )
}

function CardContent({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="card-content"
      className={cn('p-6 pt-4', className)}
      {...props}
    />
  )
}

function CardFooter({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="card-footer"
      className={cn('flex items-center gap-3 p-6 pt-0', className)}
      {...props}
    />
  )
}

export {
  Card,
  CardHeader,
  CardFooter,
  CardTitle,
  CardAction,
  CardDescription,
  CardContent,
  cardVariants,
}