41 lines
1.3 KiB
TypeScript
41 lines
1.3 KiB
TypeScript
import React from 'react';
|
|
import { componentStyles, mergeClasses } from '../../styles/designSystem';
|
|
|
|
interface CardProps {
|
|
variant?: 'default' | 'interactive' | 'service';
|
|
className?: string;
|
|
children: React.ReactNode;
|
|
onClick?: () => void;
|
|
}
|
|
|
|
const variantClasses = {
|
|
default: 'bg-gradient-to-br from-banquise-blue-dark/10 to-banquise-blue-dark/5',
|
|
interactive: 'bg-gradient-to-br from-banquise-blue-dark/10 to-banquise-blue-dark/5 cursor-pointer hover:-translate-y-4 hover:shadow-2xl hover:border-banquise-blue-lightest/50 hover:from-banquise-blue-dark/15 hover:to-banquise-blue-dark/8 active:scale-95',
|
|
service: 'bg-gradient-to-br from-banquise-blue-dark/10 to-banquise-blue-dark/5 cursor-pointer hover:-translate-y-4 hover:shadow-2xl hover:border-banquise-blue-lightest/50 hover:from-banquise-blue-dark/15 hover:to-banquise-blue-dark/8 active:scale-95',
|
|
};
|
|
|
|
export const Card: React.FC<CardProps> = ({
|
|
variant = 'default',
|
|
className = '',
|
|
children,
|
|
onClick,
|
|
}) => {
|
|
const cardClasses = mergeClasses(
|
|
componentStyles.card.base,
|
|
variantClasses[variant],
|
|
className
|
|
);
|
|
|
|
const Component = onClick ? 'button' : 'div';
|
|
|
|
return (
|
|
<Component
|
|
className={cardClasses}
|
|
onClick={onClick}
|
|
{...(onClick ? { type: 'button' } : {})}
|
|
>
|
|
{children}
|
|
</Component>
|
|
);
|
|
};
|