Card.tsx•1.81 kB
import React from 'react';
interface CardProps {
children: React.ReactNode;
className?: string;
}
export const Card: React.FC<CardProps> = ({ children, className = '' }) => {
return (
<div className={`bg-gray-800 shadow-md rounded-lg overflow-hidden w-full h-full flex flex-col ${className}`}>
{children}
</div>
);
};
interface CardHeaderProps {
children: React.ReactNode;
className?: string;
}
export const CardHeader: React.FC<CardHeaderProps> = ({ children, className = '' }) => {
return (
<div className={`px-6 py-4 border-b border-gray-700 bg-gray-800 ${className}`}>
{children}
</div>
);
};
interface CardTitleProps {
children: React.ReactNode;
className?: string;
}
export const CardTitle: React.FC<CardTitleProps> = ({ children, className = '' }) => {
return (
<h3 className={`text-lg font-medium text-gray-100 ${className}`}>
{children}
</h3>
);
};
interface CardDescriptionProps {
children: React.ReactNode;
className?: string;
}
export const CardDescription: React.FC<CardDescriptionProps> = ({ children, className = '' }) => {
return (
<p className={`mt-1 text-sm text-gray-400 ${className}`}>
{children}
</p>
);
};
interface CardContentProps {
children: React.ReactNode;
className?: string;
}
export const CardContent: React.FC<CardContentProps> = ({ children, className = '' }) => {
return (
<div className={`px-6 py-4 bg-gray-800 ${className}`}>
{children}
</div>
);
};
interface CardFooterProps {
children: React.ReactNode;
className?: string;
}
export const CardFooter: React.FC<CardFooterProps> = ({ children, className = '' }) => {
return (
<div className={`px-6 py-4 bg-gray-800 border-t border-gray-700 ${className}`}>
{children}
</div>
);
};