101 lines
2.0 KiB
TypeScript
101 lines
2.0 KiB
TypeScript
/**
|
|
* 🎯 Card Component
|
|
* Componente de card/painel reutilizável
|
|
*/
|
|
|
|
import React from 'react';
|
|
|
|
interface CardProps {
|
|
children: React.ReactNode;
|
|
className?: string;
|
|
variant?: 'default' | 'outlined';
|
|
clickable?: boolean;
|
|
onClick?: () => void;
|
|
}
|
|
|
|
export const Card: React.FC<CardProps> = ({
|
|
children,
|
|
className = '',
|
|
variant = 'default',
|
|
clickable = false,
|
|
onClick,
|
|
}) => {
|
|
const variantStyles = {
|
|
default: 'bg-white border border-gray-200 shadow-sm',
|
|
outlined: 'bg-transparent border border-gray-200',
|
|
};
|
|
|
|
return (
|
|
<div
|
|
onClick={onClick}
|
|
className={`
|
|
rounded-lg
|
|
p-6
|
|
transition-all
|
|
duration-200
|
|
${variantStyles[variant]}
|
|
${clickable ? 'cursor-pointer hover:shadow-md' : ''}
|
|
${className}
|
|
`}
|
|
>
|
|
{children}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
interface CardHeaderProps {
|
|
children: React.ReactNode;
|
|
className?: string;
|
|
}
|
|
|
|
export const CardHeader: React.FC<CardHeaderProps> = ({
|
|
children,
|
|
className = '',
|
|
}) => (
|
|
<div className={`mb-4 border-b border-gray-200 pb-3 ${className}`}>
|
|
{children}
|
|
</div>
|
|
);
|
|
|
|
interface CardTitleProps {
|
|
children: React.ReactNode;
|
|
className?: string;
|
|
as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
|
|
}
|
|
|
|
export const CardTitle: React.FC<CardTitleProps> = ({
|
|
children,
|
|
className = '',
|
|
as: Component = 'h2',
|
|
}) => (
|
|
<Component className={`text-lg font-bold text-gray-900 ${className}`}>
|
|
{children}
|
|
</Component>
|
|
);
|
|
|
|
interface CardContentProps {
|
|
children: React.ReactNode;
|
|
className?: string;
|
|
}
|
|
|
|
export const CardContent: React.FC<CardContentProps> = ({
|
|
children,
|
|
className = '',
|
|
}) => <div className={`${className}`}>{children}</div>;
|
|
|
|
interface CardFooterProps {
|
|
children: React.ReactNode;
|
|
className?: string;
|
|
}
|
|
|
|
export const CardFooter: React.FC<CardFooterProps> = ({
|
|
children,
|
|
className = '',
|
|
}) => (
|
|
<div className={`mt-6 border-t border-gray-200 pt-3 ${className}`}>
|
|
{children}
|
|
</div>
|
|
);
|
|
|
|
export default Card;
|