wip

apps/website/components/teams/TeamSearchBar.tsx

@@ -1,28 +1,30 @@
 'use client';
 
 import { Search } from 'lucide-react';
-import Input from '@/ui/Input';
+import { Input } from '@/ui/Input';
+import { Box } from '@/ui/Box';
+import { Stack } from '@/ui/Stack';
+import { Icon } from '@/ui/Icon';
 
 interface TeamSearchBarProps {
   searchQuery: string;
   onSearchChange: (query: string) => void;
 }
 
-export default function TeamSearchBar({ searchQuery, onSearchChange }: TeamSearchBarProps) {
+export function TeamSearchBar({ searchQuery, onSearchChange }: TeamSearchBarProps) {
   return (
-    <div id="teams-list" className="mb-6 scroll-mt-8">
-      <div className="flex flex-col lg:flex-row gap-4">
-        <div className="flex-1 relative">
-          <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-500" />
+    <Box id="teams-list" mb={6} className="scroll-mt-8">
+      <Stack direction="row" gap={4} wrap>
+        <Box flex={1}>
           <Input
             type="text"
             placeholder="Search teams by name, description, region, or language..."
             value={searchQuery}
             onChange={(e) => onSearchChange(e.target.value)}
-            className="pl-11"
+            icon={<Icon icon={Search} size={5} color="text-gray-500" />}
           />
-        </div>
-      </div>
-    </div>
+        </Box>
+      </Stack>
+    </Box>
   );
-}
+}