website refactor

apps/website/components/teams/TeamSearchBar.tsx

@@ -1,9 +1,11 @@
 
 
+'use client';
+
 import { Icon } from '@/ui/Icon';
 import { Input } from '@/ui/Input';
-import { Stack } from '@/ui/primitives/Stack';
 import { Search } from 'lucide-react';
+import React from 'react';
 
 interface TeamSearchBarProps {
   searchQuery: string;
@@ -12,18 +14,15 @@ interface TeamSearchBarProps {
 
 export function TeamSearchBar({ searchQuery, onSearchChange }: TeamSearchBarProps) {
   return (
-    <Stack id="teams-list" mb={6}>
-      <Stack direction="row" gap={4} wrap>
-        <Stack 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)" />}
-          />
-        </Stack>
-      </Stack>
-    </Stack>
+    <div style={{ marginBottom: '1.5rem' }}>
+      <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} intent="low" />}
+        fullWidth
+      />
+    </div>
   );
 }