86 lines
2.0 KiB
TypeScript
86 lines
2.0 KiB
TypeScript
import { HTMLAttributes, forwardRef } from 'react';
|
|
|
|
interface CardProps extends HTMLAttributes<HTMLDivElement> {
|
|
variant?: 'default' | 'bordered' | 'elevated';
|
|
padding?: 'none' | 'sm' | 'md' | 'lg';
|
|
}
|
|
|
|
const variantStyles: Record<string, string> = {
|
|
default: 'bg-white',
|
|
bordered: 'bg-white border-2 border-slate-200',
|
|
elevated: 'bg-white shadow-lg',
|
|
};
|
|
|
|
const paddingStyles: Record<string, string> = {
|
|
none: '',
|
|
sm: 'p-3',
|
|
md: 'p-4',
|
|
lg: 'p-6',
|
|
};
|
|
|
|
export const Card = forwardRef<HTMLDivElement, CardProps>(
|
|
({ className = '', variant = 'default', padding = 'md', children, ...props }, ref) => {
|
|
return (
|
|
<div
|
|
ref={ref}
|
|
className={`rounded-xl overflow-hidden transition-all duration-300 ${variantStyles[variant]} ${paddingStyles[padding]} ${className}`}
|
|
{...props}
|
|
>
|
|
{children}
|
|
</div>
|
|
);
|
|
}
|
|
);
|
|
|
|
Card.displayName = 'Card';
|
|
|
|
type CardHeaderProps = HTMLAttributes<HTMLDivElement>;
|
|
|
|
export const CardHeader = forwardRef<HTMLDivElement, CardHeaderProps>(
|
|
({ className = '', children, ...props }, ref) => {
|
|
return (
|
|
<div
|
|
ref={ref}
|
|
className={`px-4 py-3 border-b border-slate-200 bg-slate-50 ${className}`}
|
|
{...props}
|
|
>
|
|
{children}
|
|
</div>
|
|
);
|
|
}
|
|
);
|
|
|
|
CardHeader.displayName = 'CardHeader';
|
|
|
|
type CardBodyProps = HTMLAttributes<HTMLDivElement>;
|
|
|
|
export const CardBody = forwardRef<HTMLDivElement, CardBodyProps>(
|
|
({ className = '', children, ...props }, ref) => {
|
|
return (
|
|
<div ref={ref} className={`p-4 ${className}`} {...props}>
|
|
{children}
|
|
</div>
|
|
);
|
|
}
|
|
);
|
|
|
|
CardBody.displayName = 'CardBody';
|
|
|
|
type CardFooterProps = HTMLAttributes<HTMLDivElement>;
|
|
|
|
export const CardFooter = forwardRef<HTMLDivElement, CardFooterProps>(
|
|
({ className = '', children, ...props }, ref) => {
|
|
return (
|
|
<div
|
|
ref={ref}
|
|
className={`px-4 py-3 border-t border-slate-200 bg-slate-50 ${className}`}
|
|
{...props}
|
|
>
|
|
{children}
|
|
</div>
|
|
);
|
|
}
|
|
);
|
|
|
|
CardFooter.displayName = 'CardFooter';
|