feat: Add search functionality to header

web/App.tsx

@@ -11,7 +11,7 @@ function App() {
   );
   const [filteredRepos, setFilteredRepos] = useState<Repository[]>([]);
   const [selectedLanguage, setSelectedLanguage] = useState<string | null>(null);
-  const [searchTerm, setSearchTerm] = useState('');
+  const [headerSearchTerm, setHeaderSearchTerm] = useState('');
 
   // Filter repositories based on selected language and search term
   useEffect(() => {
@@ -21,8 +21,8 @@ function App() {
       filtered = filtered.filter(repo => repo.language === selectedLanguage);
     }
 
-    if (searchTerm) {
-      const term = searchTerm.toLowerCase();
+    if (headerSearchTerm) {
+      const term = headerSearchTerm.toLowerCase();
       filtered = filtered.filter(
         repo =>
           repo.name.toLowerCase().includes(term) ||
@@ -31,23 +31,25 @@ function App() {
     }
 
     setFilteredRepos(filtered);
-  }, [repositories, selectedLanguage, searchTerm]);
+  }, [repositories, selectedLanguage, headerSearchTerm]);
 
   // Get unique languages
   const languages = [
     ...new Set(repositories.map(repo => repo.language).filter(Boolean)),
   ];
 
+  const handleHeaderSearchTermChange = (term: string) => {
+    setHeaderSearchTerm(term);
+  };
+
   return (
     <div>
-      <Header />
+      <Header onSearchTermChange={handleHeaderSearchTermChange} />
       <div className="flex items-start divide-x">
         <Sidebar
           languages={languages as string[]}
           selectedLanguage={selectedLanguage}
           onSelectLanguage={setSelectedLanguage}
-          searchTerm={searchTerm}
-          onSearchChange={setSearchTerm}
           totalRepos={repositories.length}
           filteredCount={filteredRepos.length}
         />
@@ -65,8 +67,6 @@ function App() {
             languages={languages as string[]}
             selectedLanguage={selectedLanguage}
             onSelectLanguage={setSelectedLanguage}
-            searchTerm={searchTerm}
-            onSearchChange={setSearchTerm}
             totalRepos={repositories.length}
             filteredCount={filteredRepos.length}
           />

web/components/Header.tsx

@@ -1,12 +1,30 @@
 import logo from './starkit.svg';
 import { Input } from './ui/Input';
+import { useState } from 'react';
+
+interface HeaderProps {
+  onSearchTermChange: (searchTerm: string) => void;
+}
+
+function Header({ onSearchTermChange }: HeaderProps) {
+  const [searchTerm, setSearchTerm] = useState('');
+
+  const onSearchChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const newSearchTerm = event.target.value;
+    setSearchTerm(newSearchTerm);
+    onSearchTermChange(newSearchTerm);
+  };
 
-function Header() {
   return (
     <div className="h-20 flex items-center px-10 justify-between border-b sticky top-0 bg-background/50 backdrop-blur-md z-50">
       <img draggable={false} src={logo} className="w-10 aspect-square" />
       <div className="flex items-center gap-2">
-        <Input placeholder="Search" className="w-60" />
+        <Input
+          placeholder="Search"
+          className="w-60"
+          value={searchTerm}
+          onChange={onSearchChange}
+        />
       </div>
     </div>
   );

web/components/Sidebar.tsx

@@ -5,8 +5,6 @@ interface SidebarProps {
   languages: string[];
   selectedLanguage: string | null;
   onSelectLanguage: (language: string | null) => void;
-  searchTerm: string;
-  onSearchChange: (search: string) => void;
   totalRepos: number;
   filteredCount: number;
 }
@@ -15,8 +13,6 @@ const Sidebar: React.FC<SidebarProps> = ({
   languages,
   selectedLanguage,
   onSelectLanguage,
-  searchTerm,
-  onSearchChange,
   totalRepos,
   filteredCount,
 }) => {