60 lines
1.4 KiB
TypeScript
60 lines
1.4 KiB
TypeScript
import { ReactNode } from 'react';
|
|
import './Card.css';
|
|
|
|
interface CardProps {
|
|
children: ReactNode;
|
|
className?: string;
|
|
onClick?: () => void;
|
|
href?: string;
|
|
variant?: 'default' | 'elevated' | 'accent';
|
|
}
|
|
|
|
export function Card({ children, className = '', onClick, href, variant = 'default' }: CardProps) {
|
|
const baseClass = `card card--${variant} ${className}`.trim();
|
|
|
|
if (href) {
|
|
return (
|
|
<a href={href} className={`${baseClass} card--clickable`}>
|
|
{children}
|
|
</a>
|
|
);
|
|
}
|
|
|
|
if (onClick) {
|
|
return (
|
|
<div className={`${baseClass} card--clickable`} onClick={onClick} role="button" tabIndex={0}>
|
|
{children}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return <div className={baseClass}>{children}</div>;
|
|
}
|
|
|
|
interface CardHeaderProps {
|
|
children: ReactNode;
|
|
className?: string;
|
|
}
|
|
|
|
export function CardHeader({ children, className = '' }: CardHeaderProps) {
|
|
return <div className={`card__header ${className}`.trim()}>{children}</div>;
|
|
}
|
|
|
|
interface CardBodyProps {
|
|
children: ReactNode;
|
|
className?: string;
|
|
}
|
|
|
|
export function CardBody({ children, className = '' }: CardBodyProps) {
|
|
return <div className={`card__body ${className}`.trim()}>{children}</div>;
|
|
}
|
|
|
|
interface CardFooterProps {
|
|
children: ReactNode;
|
|
className?: string;
|
|
}
|
|
|
|
export function CardFooter({ children, className = '' }: CardFooterProps) {
|
|
return <div className={`card__footer ${className}`.trim()}>{children}</div>;
|
|
}
|