styles-update

src/components/Card/Card.tsx

@@ -3,26 +3,50 @@ import React from 'react';
 export interface CardProps {
   children: React.ReactNode;
   className?: string;
-  padding?: 'none' | 'sm' | 'md' | 'lg';
+  hover?: boolean;
 }
 
-export const Card: React.FC<CardProps> = ({
-  children,
+export const Card: React.FC<CardProps> = ({ 
+  children, 
   className = '',
-  padding = 'md'
+  hover = false 
 }) => {
-  const paddingClasses = {
-    none: '',
-    sm: 'p-3',
-    md: 'p-6',
-    lg: 'p-8'
-  };
-
   return (
-    <div className={`bg-white rounded-xl shadow-lg border border-gray-200 ${paddingClasses[padding]} ${className}`}>
+    <div className={`
+      bg-white rounded-xl border border-gray-200 shadow-sm 
+      ${hover ? 'hover:shadow-md transition-shadow duration-200' : ''}
+      ${className}
+    `}>
       {children}
     </div>
   );
 };
 
-export default Card;
+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>
+);
+
+export default Card