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,115 @@
+'use client';
+
+import React from 'react';
+
+const Input = ({
+    type = 'text',
+    value,
+    onChange,
+    placeholder = '',
+    label,
+    error,
+    required = false,
+    disabled = false,
+    className = '',
+    description,
+    min,
+    max,
+    step,
+    ...props
+}) => {
+    const baseInputClassName = `w-full px-3 py-2.5 rounded-xl text-sm focus:outline-none transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed bg-white border border-neutral-300 text-neutral-900 placeholder-neutral-400 focus:border-neutral-500 focus:ring-1 focus:ring-neutral-500/20 dark:bg-neutral-900/60 dark:border-neutral-700/50 dark:text-white dark:placeholder-neutral-500 dark:focus:border-neutral-600 dark:focus:ring-neutral-600/20 dark:hover:bg-neutral-900/80 ${
+        error ? 'border-red-500/50 dark:border-red-500/50' : ''
+    } ${className}`;
+
+    const handleChange = (e) => {
+        let newValue = e.target.value;
+        
+        // Handle number type conversions
+        if (type === 'number') {
+            // Convert empty string to 0 for numeric inputs to prevent database errors
+            if (newValue === '' || newValue === null || newValue === undefined) {
+                newValue = 0;
+            } else {
+                newValue = parseFloat(newValue);
+                // Handle NaN case
+                if (isNaN(newValue)) {
+                    newValue = 0;
+                }
+            }
+        }
+        
+        onChange?.(newValue);
+    };
+
+    // Enhanced color input renderer
+    const renderColorInput = () => {
+        return (
+            <div className="flex gap-2">
+                <div className="relative">
+                    <input
+                        type="color"
+                        className="absolute inset-0 w-12 h-10 opacity-0 cursor-pointer"
+                        value={value || '#000000'}
+                        onChange={handleChange}
+                        disabled={disabled}
+                        {...props}
+                    />
+                    <div 
+                        className={`w-12 h-10 border rounded-xl cursor-pointer transition-all duration-200 ${
+                            error ? 'border-red-500/50' : 'border-neutral-300 dark:border-neutral-700/50 dark:hover:border-neutral-600'
+                        } ${disabled ? 'opacity-50 cursor-not-allowed' : ''}`}
+                        style={{ backgroundColor: value || '#000000' }}
+                    ></div>
+                </div>
+                <input
+                    type="text"
+                    className={`${baseInputClassName} flex-1 min-w-0`}
+                    value={value || ''}
+                    onChange={handleChange}
+                    placeholder={placeholder || 'Enter hex color'}
+                    disabled={disabled}
+                    {...props}
+                />
+            </div>
+        );
+    };
+
+    return (
+        <div className="space-y-2">
+            {label && (
+                <label className="block text-xs font-medium text-neutral-700 dark:text-white">
+                    {label}
+                    {required && <span className="text-red-500 dark:text-red-400 ml-1">*</span>}
+                </label>
+            )}
+            
+            {type === 'color' ? (
+                renderColorInput()
+            ) : (
+                <input
+                    type={type}
+                    value={value}
+                    onChange={handleChange}
+                    placeholder={placeholder}
+                    className={baseInputClassName}
+                    disabled={disabled}
+                    min={min}
+                    max={max}
+                    step={step}
+                    {...props}
+                />
+            )}
+            
+            {error && (
+                <p className="text-red-600 dark:text-red-400 text-xs">{error}</p>
+            )}
+            
+            {description && !error && (
+                <p className="text-xs text-neutral-500 dark:text-neutral-400 opacity-75">{description}</p>
+            )}
+        </div>
+    );
+};
+
+export default Input;