website refactor

apps/website/components/drivers/DriversSearch.tsx

@@ -0,0 +1,30 @@
+'use client';
+
+import React from 'react';
+import { Search } from 'lucide-react';
+import { Box } from '@/ui/Box';
+import { Input } from '@/ui/Input';
+
+interface DriversSearchProps {
+  query: string;
+  onChange: (query: string) => void;
+}
+
+export function DriversSearch({ query, onChange }: DriversSearchProps) {
+  return (
+    <Box mb={8}>
+      <Box style={{ position: 'relative', maxWidth: '28rem' }}>
+        <Box style={{ position: 'absolute', left: '0.75rem', top: '50%', transform: 'translateY(-50%)', zIndex: 10 }}>
+          <Search style={{ width: '1.25rem', height: '1.25rem', color: '#6b7280' }} />
+        </Box>
+        <Input
+          type="text"
+          placeholder="Search drivers by name or nationality..."
+          value={query}
+          onChange={(e) => onChange(e.target.value)}
+          style={{ paddingLeft: '2.75rem' }}
+        />
+      </Box>
+    </Box>
+  );
+}