35 lines
832 B
TypeScript
35 lines
832 B
TypeScript
import React, { ReactNode, MouseEventHandler } from 'react';
|
|
|
|
interface CardProps {
|
|
children: ReactNode;
|
|
className?: string;
|
|
onClick?: MouseEventHandler<HTMLDivElement>;
|
|
variant?: 'default' | 'highlight';
|
|
}
|
|
|
|
export function Card({
|
|
children,
|
|
className = '',
|
|
onClick,
|
|
variant = 'default'
|
|
}: CardProps) {
|
|
const baseClasses = 'rounded-lg p-6 shadow-card border duration-200';
|
|
|
|
const variantClasses = {
|
|
default: 'bg-iron-gray border-charcoal-outline',
|
|
highlight: 'bg-gradient-to-r from-blue-900/20 to-blue-700/10 border-blue-500/30'
|
|
};
|
|
|
|
const classes = [
|
|
baseClasses,
|
|
variantClasses[variant],
|
|
onClick ? 'cursor-pointer hover:scale-[1.02]' : '',
|
|
className
|
|
].filter(Boolean).join(' ');
|
|
|
|
return (
|
|
<div className={classes} onClick={onClick}>
|
|
{children}
|
|
</div>
|
|
);
|
|
} |