uup

2026-01-23 20:35:40 +03:00
parent cf3b0e48ec
commit 66c151653e
137 changed files with 41495 additions and 0 deletions
--- a/app/components/ui/Select.tsx
+++ b/app/components/ui/Select.tsx
@@ -0,0 +1,97 @@
+import { SelectHTMLAttributes, forwardRef } from 'react';
+import { getFormInputClasses, defaultLayoutConfig, type LayoutConfig } from '~/lib/layout-utils';
+
+interface SelectOption {
+  value: string;
+  label: string;
+  disabled?: boolean;
+}
+
+interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, 'className'> {
+  className?: string;
+  config?: Partial<LayoutConfig>;
+  label?: string;
+  error?: string;
+  helperText?: string;
+  fullWidth?: boolean;
+  options: SelectOption[];
+  placeholder?: string;
+}
+
+export const Select = forwardRef<HTMLSelectElement, SelectProps>(({ 
+  className = '', 
+  config = {},
+  label,
+  error,
+  helperText,
+  fullWidth = true,
+  options,
+  placeholder,
+  id,
+  ...props
+}, ref) => {
+  const layoutConfig = { ...defaultLayoutConfig, ...config };
+  const inputClasses = getFormInputClasses(!!error);
+  
+  const fullWidthClass = fullWidth ? 'w-full' : '';
+  const inputId = id || `select-${Math.random().toString(36).substr(2, 9)}`;
+  
+  return (
+    <div className={`${fullWidthClass} ${className}`} dir={layoutConfig.direction}>
+      {label && (
+        <label 
+          htmlFor={inputId}
+          className={`block text-sm font-medium mb-2 ${error ? 'text-red-700' : 'text-gray-700'} ${layoutConfig.direction === 'rtl' ? 'text-right' : 'text-left'}`}
+        >
+          {label}
+        </label>
+      )}
+      
+      <div className="relative">
+        <select
+          ref={ref}
+          id={inputId}
+          className={`${inputClasses} appearance-none bg-white`}
+          dir={layoutConfig.direction}
+          {...props}
+        >
+          {placeholder && (
+            <option value="" disabled>
+              {placeholder}
+            </option>
+          )}
+          {options.map((option) => (
+            <option 
+              key={option.value} 
+              value={option.value}
+              disabled={option.disabled}
+            >
+              {option.label}
+            </option>
+          ))}
+        </select>
+        
+        {/* Custom dropdown arrow */}
+        <div className={`absolute inset-y-0 ${layoutConfig.direction === 'rtl' ? 'left-0 pl-3' : 'right-0 pr-3'} flex items-center pointer-events-none`}>
+          <svg className="h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor">
+            <path fillRule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clipRule="evenodd" />
+          </svg>
+        </div>
+      </div>
+      
+      {error && (
+        <p className={`mt-2 text-sm text-red-600 ${layoutConfig.direction === 'rtl' ? 'text-right' : 'text-left'}`}>
+          {error}
+        </p>
+      )}
+      
+      {helperText && !error && (
+        <p className={`mt-2 text-sm text-gray-500 ${layoutConfig.direction === 'rtl' ? 'text-right' : 'text-left'}`}>
+          {helperText}
+        </p>
+      )}
+    </div>
+  );
+});
+
+Select.displayName = 'Select';