61 lines
2.1 KiB
TypeScript
61 lines
2.1 KiB
TypeScript
import React, { ReactNode, MouseEventHandler, HTMLAttributes } from 'react';
|
|
|
|
type Spacing = 0 | 0.5 | 1 | 1.5 | 2 | 2.5 | 3 | 3.5 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 14 | 16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96;
|
|
|
|
interface CardProps extends HTMLAttributes<HTMLDivElement> {
|
|
children: ReactNode;
|
|
className?: string;
|
|
onClick?: MouseEventHandler<HTMLDivElement>;
|
|
variant?: 'default' | 'highlight';
|
|
p?: Spacing;
|
|
px?: Spacing;
|
|
py?: Spacing;
|
|
pt?: Spacing;
|
|
pb?: Spacing;
|
|
pl?: Spacing;
|
|
pr?: Spacing;
|
|
}
|
|
|
|
export function Card({
|
|
children,
|
|
className = '',
|
|
onClick,
|
|
variant = 'default',
|
|
p, px, py, pt, pb, pl, pr,
|
|
...props
|
|
}: CardProps) {
|
|
const baseClasses = 'rounded-lg 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 spacingMap: Record<number, string> = {
|
|
0: '0', 0.5: '0.5', 1: '1', 1.5: '1.5', 2: '2', 2.5: '2.5', 3: '3', 3.5: '3.5', 4: '4',
|
|
5: '5', 6: '6', 7: '7', 8: '8', 9: '9', 10: '10', 11: '11', 12: '12', 14: '14',
|
|
16: '16', 20: '20', 24: '24', 28: '28', 32: '32', 36: '36', 40: '40', 44: '44',
|
|
48: '48', 52: '52', 56: '56', 60: '60', 64: '64', 72: '72', 80: '80', 96: '96'
|
|
};
|
|
|
|
const classes = [
|
|
baseClasses,
|
|
variantClasses[variant],
|
|
onClick ? 'cursor-pointer hover:scale-[1.02]' : '',
|
|
p !== undefined ? `p-${spacingMap[p]}` : (px === undefined && py === undefined && pt === undefined && pb === undefined && pl === undefined && pr === undefined ? 'p-6' : ''),
|
|
px !== undefined ? `px-${spacingMap[px]}` : '',
|
|
py !== undefined ? `py-${spacingMap[py]}` : '',
|
|
pt !== undefined ? `pt-${spacingMap[pt]}` : '',
|
|
pb !== undefined ? `pb-${spacingMap[pb]}` : '',
|
|
pl !== undefined ? `pl-${spacingMap[pl]}` : '',
|
|
pr !== undefined ? `pr-${spacingMap[pr]}` : '',
|
|
className
|
|
].filter(Boolean).join(' ');
|
|
|
|
return (
|
|
<div className={classes} onClick={onClick} {...props}>
|
|
{children}
|
|
</div>
|
|
);
|
|
}
|