wip

apps/website/ui/Input.tsx

@@ -5,16 +5,31 @@ import { Box } from './Box';
 interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
   variant?: 'default' | 'error';
   errorMessage?: string;
+  icon?: React.ReactNode;
 }
 
 export const Input = forwardRef<HTMLInputElement, InputProps>(
-  ({ className = '', variant = 'default', errorMessage, ...props }, ref) => {
+  ({ className = '', variant = 'default', errorMessage, icon, ...props }, ref) => {
     const baseClasses = 'px-3 py-2 border rounded-lg text-white bg-deep-graphite focus:outline-none focus:border-primary-blue transition-colors w-full';
     const variantClasses = (variant === 'error' || errorMessage) ? 'border-racing-red' : 'border-charcoal-outline';
-    const classes = `${baseClasses} ${variantClasses} ${className}`;
+    const iconClasses = icon ? 'pl-10' : '';
+    const classes = `${baseClasses} ${variantClasses} ${iconClasses} ${className}`;
 
     return (
-      <Box fullWidth>
+      <Box fullWidth position="relative">
+        {icon && (
+          <Box 
+            position="absolute" 
+            left="3" 
+            top="50%" 
+            style={{ transform: 'translateY(-50%)' }}
+            zIndex={10}
+            display="flex"
+            center
+          >
+            {icon}
+          </Box>
+        )}
         <input ref={ref} className={classes} {...props} />
         {errorMessage && (
           <Text size="xs" color="text-error-red" block mt={1}>