creacion de componentes dinamicos

2026-08-26 15:56:14 -05:00
1 parent ae415fef4e
commit d74aa50845
@@ -0,0 +1,146 @@
+import React from 'react';
+
+export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
+  variant?: 'default' | 'elevated' | 'glass' | 'outline' | 'interactive';
+  padding?: 'none' | 'sm' | 'md' | 'lg';
+}
+
+const variantStyles: Record<NonNullable<CardProps['variant']>, string> = {
+  default:
+    'bg-white dark:bg-slate-900/90 border border-slate-200 dark:border-slate-800/80 shadow-sm',
+  elevated:
+    'bg-white dark:bg-slate-900 border border-slate-100 dark:border-slate-800 shadow-xl shadow-slate-200/50 dark:shadow-black/40',
+  glass:
+    'bg-white/80 dark:bg-slate-900/60 backdrop-blur-xl border border-slate-200/70 dark:border-slate-800/70 shadow-lg',
+  outline:
+    'bg-transparent border border-slate-300 dark:border-slate-800 shadow-none',
+  interactive:
+    'bg-white dark:bg-slate-900/90 border border-slate-200 dark:border-slate-800 shadow-sm hover:shadow-xl hover:shadow-cyan-500/10 hover:border-cyan-500/50 dark:hover:border-cyan-500/40 cursor-pointer transform hover:-translate-y-1 transition-all duration-300 ease-out',
+};
+
+const paddingStyles: Record<NonNullable<CardProps['padding']>, string> = {
+  none: 'p-0',
+  sm: 'p-4',
+  md: 'p-6',
+  lg: 'p-8',
+};
+
+export const Card = React.forwardRef<HTMLDivElement, CardProps>(
+  (
+    {
+      variant = 'default',
+      padding = 'none',
+      className = '',
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    return (
+      <div
+        ref={ref}
+        className={`
+          rounded-2xl overflow-hidden transition-colors
+          ${variantStyles[variant]}
+          ${paddingStyles[padding]}
+          ${className}
+        `}
+        {...props}
+      >
+        {children}
+      </div>
+    );
+  }
+);
+
+Card.displayName = 'Card';
+
+export interface CardHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+  bordered?: boolean;
+}
+
+export const CardHeader: React.FC<CardHeaderProps> = ({
+  bordered = false,
+  className = '',
+  children,
+  ...props
+}) => {
+  return (
+    <div
+      className={`
+        p-5 sm:p-6 flex flex-col space-y-1.5
+        ${bordered ? 'border-b border-slate-100 dark:border-slate-800/80' : ''}
+        ${className}
+      `}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+};
+
+export const CardTitle: React.FC<React.HTMLAttributes<HTMLHeadingElement>> = ({
+  className = '',
+  children,
+  ...props
+}) => {
+  return (
+    <h3
+      className={`text-lg sm:text-xl font-bold tracking-tight text-slate-900 dark:text-white transition-colors ${className}`}
+      {...props}
+    >
+      {children}
+    </h3>
+  );
+};
+
+export const CardDescription: React.FC<React.HTMLAttributes<HTMLParagraphElement>> = ({
+  className = '',
+  children,
+  ...props
+}) => {
+  return (
+    <p
+      className={`text-xs sm:text-sm text-slate-500 dark:text-slate-400 leading-relaxed ${className}`}
+      {...props}
+    >
+      {children}
+    </p>
+  );
+};
+
+export const CardContent: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({
+  className = '',
+  children,
+  ...props
+}) => {
+  return (
+    <div className={`p-5 sm:p-6 ${className}`} {...props}>
+      {children}
+    </div>
+  );
+};
+
+export interface CardFooterProps extends React.HTMLAttributes<HTMLDivElement> {
+  bordered?: boolean;
+}
+
+export const CardFooter: React.FC<CardFooterProps> = ({
+  bordered = false,
+  className = '',
+  children,
+  ...props
+}) => {
+  return (
+    <div
+      className={`
+        p-5 sm:p-6 flex items-center justify-between
+        ${bordered ? 'border-t border-slate-100 dark:border-slate-800/80' : ''}
+        ${className}
+      `}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+};