before optimization

src/pages/HomePage.jsx

@@ -1,14 +1,30 @@
 import React, { useEffect, useState, useContext } from 'react';
 import CardRow from '../components/CardRow/CardRow';
+import SearchBar from '../components/SearchBar/SearchBar';
 import { fetchCards } from '../services/api';
 import { CardContext } from '../store/CardContext';
 
+// Debounce hook
+function useDebouncedValue(value, delay = 250) {
+  const [debounced, setDebounced] = useState(value);
+
+  useEffect(() => {
+    const handler = setTimeout(() => setDebounced(value), delay);
+    return () => clearTimeout(handler);
+  }, [value, delay]);
+
+  return debounced;
+}
+
 function HomePage() {
   const [cards, setCards] = useState([]);
+  const [searchTerm, setSearchTerm] = useState('');
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(null);
   const { expandedCardId, cardImages, setCardImage } = useContext(CardContext);
 
+  const debouncedSearchTerm = useDebouncedValue(searchTerm, 250);
+
   useEffect(() => {
     fetchCards()
       .then(data => setCards(data))
@@ -33,12 +49,20 @@ function HomePage() {
 
   const expandedCard = cards.find(c => c.id === expandedCardId);
 
+  // Filter + sort using debounced search
+  const filteredCards = cards
+    .filter(card =>
+      card.name.toLowerCase().includes(debouncedSearchTerm.toLowerCase())
+    )
+    .sort((a, b) => a.name.localeCompare(b.name));
+
   return (
     <div style={{ display: 'flex', height: '100vh' }}>
       {/* Left panel: card list */}
-      <div style={{ flex: 1, borderRight: '1px solid #ccc', padding: '1rem', overflowY: 'auto' }}>
+      <div style={{ flex: 2, borderRight: '1px solid #ccc', padding: '1rem', overflowY: 'auto' }}>
         <h2>Card List</h2>
-        {cards.map(card => (
+        <SearchBar searchTerm={searchTerm} setSearchTerm={setSearchTerm} />
+        {filteredCards.map(card => (
           <CardRow key={card.id} card={card} />
         ))}
       </div>
@@ -64,4 +88,4 @@ function HomePage() {
   );
 }
 
-export default HomePage;
+export default HomePage;