chore: import codes

2026-04-12 12:50:14 -04:00
parent 4bcb4898e8
commit 65ae3c6788
241 changed files with 48834 additions and 1 deletions
@@ -0,0 +1,110 @@
+'use client';
+
+import React from 'react';
+
+const Card = ({
+    children,
+    title,
+    subtitle,
+    header,
+    footer,
+    variant = 'default',
+    padding = 'md',
+    hover = true,
+    spacing = 'md',
+    className = '',
+    ...props
+}) => {
+    const baseClassName = 'border transition-all duration-300';
+    const isLightDark = variant === 'lightDark';
+
+    const variants = {
+        default: 'rounded-xl bg-white dark:bg-neutral-800/30 border-neutral-200 dark:border-neutral-700/30',
+        elevated: 'rounded-xl bg-neutral-50/80 dark:bg-neutral-900/40 border-neutral-200 dark:border-neutral-800/50',
+        outline: 'rounded-xl bg-transparent border-neutral-300 dark:border-neutral-700/50',
+        solid: 'rounded-xl bg-neutral-100 dark:bg-neutral-800 border-neutral-200 dark:border-neutral-700',
+        lightDark: 'rounded-2xl bg-white/80 dark:bg-neutral-900/40 border-neutral-200/80 dark:border-neutral-800/50',
+        success: 'rounded-xl bg-green-50 dark:bg-green-900/30 border-green-200 dark:border-green-900/50',
+        info: 'rounded-xl bg-blue-50 dark:bg-blue-900/30 border-blue-200 dark:border-blue-900/50',
+        warning: 'rounded-xl bg-yellow-50 dark:bg-yellow-900/30 border-yellow-200 dark:border-yellow-900/50',
+        danger: 'rounded-xl bg-red-50 dark:bg-red-900/30 border-red-200 dark:border-red-900/50'
+    };
+
+    const variantsHover = {
+        default: 'hover:bg-neutral-50 dark:hover:bg-neutral-800/40 hover:border-neutral-300 dark:hover:border-neutral-700/50',
+        elevated: 'hover:bg-neutral-100 dark:hover:bg-neutral-900/50 hover:border-neutral-300 dark:hover:border-neutral-700/50',
+        outline: 'hover:border-neutral-400 dark:hover:border-neutral-600/50',
+        solid: 'hover:bg-neutral-200 dark:hover:bg-neutral-700/80',
+        lightDark: 'hover:bg-neutral-50/90 hover:border-neutral-300/80 dark:hover:bg-neutral-900/50 dark:hover:border-neutral-700/50',
+        success: 'hover:bg-green-100 dark:hover:bg-green-900/40 hover:border-green-300 dark:hover:border-green-900/50',
+        info: 'hover:bg-blue-100 dark:hover:bg-blue-900/40 hover:border-blue-300 dark:hover:border-blue-900/50',
+        warning: 'hover:bg-yellow-100 dark:hover:bg-yellow-900/40 hover:border-yellow-300 dark:hover:border-yellow-900/50',
+        danger: 'hover:bg-red-100 dark:hover:bg-red-900/40 hover:border-red-300 dark:hover:border-red-900/50'
+    };
+    
+    const paddings = {
+        none: '',
+        sm: 'p-4',
+        md: 'p-6',
+        lg: 'p-8'
+    };
+
+    const spacings = {
+        none: '',
+        sm: 'flex flex-col gap-2',
+        md: 'flex flex-col gap-4',
+        lg: 'flex flex-col gap-6'
+    };
+
+    const headerBorderClass = 'border-neutral-200 dark:border-neutral-700/30';
+    const footerBorderClass = 'border-neutral-200 dark:border-neutral-700/30';
+    const titleClass = 'text-sm font-medium text-neutral-900 dark:text-white';
+    const subtitleClass = 'text-xs text-neutral-500 dark:text-neutral-400 mt-1';
+
+    const CardHeader = () => {
+        if (header) return header;
+        if (!title && !subtitle) return null;
+        
+        return (
+            <div className={`border-b ${headerBorderClass} pb-4 mb-6`}>
+                {title && (
+                    <h3 className={titleClass}>
+                        {title}
+                    </h3>
+                )}
+                {subtitle && (
+                    <p className={subtitleClass}>
+                        {subtitle}
+                    </p>
+                )}
+            </div>
+        );
+    };
+
+    const CardFooter = () => {
+        if (!footer) return null;
+        
+        return (
+            <div className={`border-t ${footerBorderClass} pt-4 mt-6`}>
+                {footer}
+            </div>
+        );
+    };
+
+    return (
+        <div
+            className={`${baseClassName} ${variants[variant] || variants.default} ${hover ? (variantsHover[variant] || variantsHover.default) : ''} ${className}`}
+            {...props}
+        >
+            <div className={paddings[padding]}>
+                <CardHeader />
+                <div className={spacings[spacing]}>
+                    {children}
+                </div>
+                <CardFooter />
+            </div>
+        </div>
+    );
+};
+
+export default Card;