website refactor

apps/website/ui/TeamSearchBar.tsx

@@ -0,0 +1,30 @@
+
+
+import { Box } from '@/ui/Box';
+import { Icon } from '@/ui/Icon';
+import { Input } from '@/ui/Input';
+import { Stack } from '@/ui/Stack';
+import { Search } from 'lucide-react';
+
+interface TeamSearchBarProps {
+  searchQuery: string;
+  onSearchChange: (query: string) => void;
+}
+
+export function TeamSearchBar({ searchQuery, onSearchChange }: TeamSearchBarProps) {
+  return (
+    <Box id="teams-list" mb={6}>
+      <Stack direction="row" gap={4} wrap>
+        <Box flexGrow={1}>
+          <Input
+            type="text"
+            placeholder="Search teams by name, description, region, or language..."
+            value={searchQuery}
+            onChange={(e) => onSearchChange(e.target.value)}
+            icon={<Icon icon={Search} size={5} color="var(--text-gray-500)" />}
+          />
+        </Box>
+      </Stack>
+    </Box>
+  );
+}