claudetools/projects/msp-tools/guru-rmm/dashboard/src/components/Card.tsx

import { HTMLAttributes, forwardRef } from "react";
import { cn } from "../lib/utils";

/**
 * Mission Control Card Component
 * Glassmorphism design with optional glow variants
 */

export type CardVariant = "default" | "glow-cyan" | "glow-green" | "glow-amber" | "glow-rose";

export interface CardProps extends HTMLAttributes<HTMLDivElement> {
  variant?: CardVariant;
}

const cardVariants: Record<CardVariant, string> = {
  default: "border-slate-700/50",
  "glow-cyan": "border-cyan-500/50 shadow-[0_0_15px_rgba(6,182,212,0.15)]",
  "glow-green": "border-emerald-500/50 shadow-[0_0_15px_rgba(16,185,129,0.15)]",
  "glow-amber": "border-amber-500/50 shadow-[0_0_15px_rgba(245,158,11,0.15)]",
  "glow-rose": "border-rose-500/50 shadow-[0_0_15px_rgba(244,63,94,0.15)]",
};

const cardHoverVariants: Record<CardVariant, string> = {
  default: "hover:border-slate-600/70 hover:shadow-lg hover:shadow-slate-900/50",
  "glow-cyan": "hover:border-cyan-400/70 hover:shadow-[0_0_25px_rgba(6,182,212,0.25)]",
  "glow-green": "hover:border-emerald-400/70 hover:shadow-[0_0_25px_rgba(16,185,129,0.25)]",
  "glow-amber": "hover:border-amber-400/70 hover:shadow-[0_0_25px_rgba(245,158,11,0.25)]",
  "glow-rose": "hover:border-rose-400/70 hover:shadow-[0_0_25px_rgba(244,63,94,0.25)]",
};

const Card = forwardRef<HTMLDivElement, CardProps>(
  ({ className, variant = "default", ...props }, ref) => (
    <div
      ref={ref}
      className={cn(
        // Base glassmorphism
        "rounded-xl bg-slate-900/60 backdrop-blur-xl",
        // Border
        "border",
        cardVariants[variant],
        // Inner shadow for depth
        "shadow-[inset_0_1px_0_0_rgba(148,163,184,0.1)]",
        // Text color
        "text-slate-100",
        // Transition for hover effects
        "transition-all duration-300 ease-out",
        // Hover: subtle lift
        "hover:-translate-y-0.5",
        cardHoverVariants[variant],
        className
      )}
      {...props}
    />
  )
);
Card.displayName = "Card";

const CardHeader = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
  ({ className, ...props }, ref) => (
    <div
      ref={ref}
      className={cn(
        "flex flex-col space-y-1.5 p-6",
        // Bottom border separator
        "border-b border-slate-700/50",
        className
      )}
      {...props}
    />
  )
);
CardHeader.displayName = "CardHeader";

export interface CardTitleProps extends HTMLAttributes<HTMLHeadingElement> {
  gradient?: boolean;
  gradientFrom?: string;
  gradientTo?: string;
}

const CardTitle = forwardRef<HTMLParagraphElement, CardTitleProps>(
  ({ className, gradient = false, gradientFrom = "cyan-400", gradientTo = "blue-500", ...props }, ref) => (
    <h3
      ref={ref}
      className={cn(
        // Monospace/bold styling
        "font-mono font-bold leading-none tracking-tight text-lg",
        // Gradient text option
        gradient && [
          "bg-clip-text text-transparent",
          `bg-gradient-to-r from-${gradientFrom} to-${gradientTo}`,
        ],
        // Default text color when not gradient
        !gradient && "text-slate-100",
        className
      )}
      {...props}
    />
  )
);
CardTitle.displayName = "CardTitle";

const CardDescription = forwardRef<HTMLParagraphElement, HTMLAttributes<HTMLParagraphElement>>(
  ({ className, ...props }, ref) => (
    <p
      ref={ref}
      className={cn(
        "text-sm text-slate-400",
        className
      )}
      {...props}
    />
  )
);
CardDescription.displayName = "CardDescription";

const CardContent = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
  ({ className, ...props }, ref) => (
    <div
      ref={ref}
      className={cn("p-6 pt-0", className)}
      {...props}
    />
  )
);
CardContent.displayName = "CardContent";

const CardFooter = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
  ({ className, ...props }, ref) => (
    <div
      ref={ref}
      className={cn(
        "flex items-center p-6 pt-0",
        className
      )}
      {...props}
    />
  )
);
CardFooter.displayName = "CardFooter";

export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter };