website refactor

apps/website/ui/Select.tsx

@@ -1,4 +1,6 @@
 import React, { ChangeEvent, SelectHTMLAttributes } from 'react';
+import { Stack } from './Stack';
+import { Text } from './Text';
 
 interface SelectOption {
   value: string;
@@ -13,6 +15,9 @@ interface SelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
   options: SelectOption[];
   className?: string;
   style?: React.CSSProperties;
+  label?: string;
+  fullWidth?: boolean;
+  pl?: number;
 }
 
 export function Select({
@@ -23,26 +28,43 @@ export function Select({
   options,
   className = '',
   style,
+  label,
+  fullWidth = true,
+  pl,
   ...props
 }: SelectProps) {
-  const defaultClasses = 'w-full 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 = className ? `${defaultClasses} ${className}` : defaultClasses;
+  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(' ');
 
   return (
-    <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 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>
   );
 }