57 lines
1.9 KiB
TypeScript
57 lines
1.9 KiB
TypeScript
import { ReactNode } from 'react';
|
|
|
|
interface CardProps {
|
|
title: string;
|
|
children: ReactNode;
|
|
className?: string;
|
|
colorScheme?: 'blue' | 'green' | 'red' | 'purple' | 'teal' | 'orange' | 'pink' | 'yellow' | 'none';
|
|
glowEffect?: boolean;
|
|
}
|
|
|
|
export default function Card({
|
|
title,
|
|
children,
|
|
className = '',
|
|
colorScheme = 'none',
|
|
glowEffect = false
|
|
}: CardProps) {
|
|
// Only add color-specific classes if a colorScheme is specified
|
|
const headerColor = colorScheme !== 'none' ? {
|
|
blue: 'text-accent-blue',
|
|
green: 'text-accent-green',
|
|
red: 'text-accent-red',
|
|
purple: 'text-accent-purple',
|
|
teal: 'text-accent-teal',
|
|
orange: 'text-accent-orange',
|
|
pink: 'text-accent-pink',
|
|
yellow: 'text-accent-yellow',
|
|
}[colorScheme] : 'text-foreground';
|
|
|
|
const glowClass = glowEffect && colorScheme !== 'none' ? {
|
|
blue: 'shadow-[0_0_15px_rgba(59,130,246,0.15)]',
|
|
green: 'shadow-[0_0_15px_rgba(16,185,129,0.15)]',
|
|
red: 'shadow-[0_0_15px_rgba(244,63,94,0.15)]',
|
|
purple: 'shadow-[0_0_15px_rgba(139,92,246,0.15)]',
|
|
teal: 'shadow-[0_0_15px_rgba(20,184,166,0.15)]',
|
|
orange: 'shadow-[0_0_15px_rgba(249,115,22,0.15)]',
|
|
pink: 'shadow-[0_0_15px_rgba(236,72,153,0.15)]',
|
|
yellow: 'shadow-[0_0_15px_rgba(245,158,11,0.15)]',
|
|
}[colorScheme] : '';
|
|
|
|
// Define the indicator dot color
|
|
const indicatorColor = colorScheme !== 'none' ? `bg-accent-${colorScheme}` : 'bg-gray-500';
|
|
|
|
return (
|
|
<div className={`bg-card-bg border border-card-border rounded-lg ${glowClass} ${className}`}>
|
|
<div className="flex items-center border-b border-card-border p-5 pb-4">
|
|
<h2 className={`text-lg font-medium ${headerColor}`}>{title}</h2>
|
|
{colorScheme !== 'none' && (
|
|
<div className={`ml-2 h-1.5 w-1.5 rounded-full ${indicatorColor}`}></div>
|
|
)}
|
|
</div>
|
|
<div className="p-5 pt-4">
|
|
{children}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|