website refactor

apps/website/ui/Select.tsx

@@ -1,4 +1,5 @@
-import React, { ChangeEvent, SelectHTMLAttributes } from 'react';
+import React, { forwardRef, ReactNode } from 'react';
+import { Box } from './primitives/Box';
 import { Stack } from './primitives/Stack';
 import { Text } from './Text';
 
@@ -7,64 +8,57 @@ interface SelectOption {
   label: string;
 }
 
-interface SelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
-  id?: string;
-  'aria-label'?: string;
-  value?: string;
-  onChange?: (e: ChangeEvent<HTMLSelectElement>) => void;
-  options: SelectOption[];
-  className?: string;
-  style?: React.CSSProperties;
+interface SelectProps extends React.SelectHTMLAttributes<HTMLSelectElement> {
   label?: string;
   fullWidth?: boolean;
   pl?: number;
+  errorMessage?: string;
+  variant?: 'default' | 'error';
+  options?: SelectOption[];
 }
 
-export function Select({
-  id,
-  'aria-label': ariaLabel,
-  value,
-  onChange,
-  options,
-  className = '',
-  style,
-  label,
-  fullWidth = true,
-  pl,
-  ...props
-}: SelectProps) {
-  const spacingMap: Record<number, string> = {
-    10: 'pl-10'
-  };
-  const defaultClasses = `${fullWidth ? 'w-full' : 'w-auto'} px-3 py-2 bg-deep-graphite border border-charcoal-outline rounded-lg text-white focus:outline-none focus:border-primary-blue transition-colors`;
-  const classes = [
-    defaultClasses,
-    pl !== undefined ? spacingMap[pl] : '',
-    className
-  ].filter(Boolean).join(' ');
+export const Select = forwardRef<HTMLSelectElement, SelectProps>(
+  ({ label, fullWidth = true, pl, errorMessage, variant = 'default', options, children, className = '', style, ...props }, ref) => {
+    const isError = variant === 'error' || !!errorMessage;
+    
+    const variantClasses = isError 
+      ? 'border-warning-amber focus:border-warning-amber' 
+      : 'border-charcoal-outline focus:border-primary-blue';
+    
+    const defaultClasses = `${fullWidth ? 'w-full' : 'w-auto'} px-3 py-2 bg-deep-graphite border rounded-lg text-white focus:outline-none transition-colors`;
+    const classes = [
+      defaultClasses,
+      variantClasses,
+      pl ? `pl-${pl}` : '',
+      className
+    ].filter(Boolean).join(' ');
 
-  return (
-    <Stack gap={1.5} fullWidth={fullWidth}>
-      {label && (
-        <Text as="label" size="sm" weight="medium" color="text-gray-400">
-          {label}
-        </Text>
-      )}
-      <select
-        id={id}
-        aria-label={ariaLabel}
-        value={value}
-        onChange={onChange}
-        className={classes}
-        style={style}
-        {...props}
-      >
-        {options.map((option) => (
-          <option key={option.value} value={option.value}>
-            {option.label}
-          </option>
-        ))}
-      </select>
-    </Stack>
-  );
-}
+    return (
+      <Stack gap={1.5} fullWidth={fullWidth}>
+        {label && (
+          <Text as="label" size="xs" weight="bold" color="text-gray-500" uppercase letterSpacing="wider">
+            {label}
+          </Text>
+        )}
+        <Box 
+          as="select" 
+          ref={ref} 
+          className={classes} 
+          style={style} 
+          {...props}
+        >
+          {options ? options.map(opt => (
+            <option key={opt.value} value={opt.value}>{opt.label}</option>
+          )) : children}
+        </Box>
+        {errorMessage && (
+          <Text size="xs" color="text-warning-amber" mt={1}>
+            {errorMessage}
+          </Text>
+        )}
+      </Stack>
+    );
+  }
+);
+
+Select.displayName = 'Select';