36 lines
1021 B
TypeScript
36 lines
1021 B
TypeScript
import React from 'react';
|
|
|
|
export interface CardProps {
|
|
children: React.ReactNode;
|
|
className?: string;
|
|
hover?: boolean;
|
|
}
|
|
|
|
export const Card: React.FC<CardProps> = ({
|
|
children,
|
|
className = '',
|
|
hover = false
|
|
}) => (
|
|
<div
|
|
className={`
|
|
bg-white rounded-xl border border-gray-200 shadow-sm
|
|
${hover ? 'hover:shadow-md transition-shadow duration-200' : ''}
|
|
${className}
|
|
`}
|
|
>
|
|
{children}
|
|
</div>
|
|
);
|
|
|
|
export const CardHeader: React.FC<{ children: React.ReactNode; className?: string }> = ({
|
|
children, className = '',
|
|
}) => <div className={`p-6 pb-4 ${className}`}>{children}</div>;
|
|
|
|
export const CardContent: React.FC<{ children: React.ReactNode; className?: string }> = ({
|
|
children, className = '',
|
|
}) => <div className={`p-6 pt-0 ${className}`}>{children}</div>;
|
|
|
|
export const CardFooter: React.FC<{ children: React.ReactNode; className?: string }> = ({
|
|
children, className = '',
|
|
}) => <div className={`p-6 pt-4 border-t border-gray-100 ${className}`}>{children}</div>;
|