Add basic search functionality

src/App.tsx

@@ -1,29 +1,24 @@
-import { useAppContext } from "./contexts/AppContext";
-
+import { Routes, Route, BrowserRouter } from "react-router-dom";
 import Header from "./layouts/Header";
 import Banner from "./layouts/Banner";
-import Sidebar from "./layouts/Sidebar";
 import Footer from "./layouts/Footer";
-
-import SnippetList from "./components/SnippetList";
+import HomePage from "./pages/HomePage.tsx";
+import SearchPage from "./pages/SearchPage.tsx";
 
 const App = () => {
-  const { category } = useAppContext();
-
   return (
     <div className="container flow">
-      <Header />
-      <Banner />
-      <main className="main">
-        <Sidebar />
-        <section className="flow">
-          <h2 className="section-title">
-            {category ? category : "Select a category"}
-          </h2>
-          <SnippetList />
-        </section>
-      </main>
-      <Footer />
+      <BrowserRouter>
+        <Header />
+        <Banner />
+        <main className="main">
+          <Routes>
+            <Route path="/" element={<HomePage />} />
+            <Route path="/search" element={<SearchPage />} />
+          </Routes>
+        </main>
+        <Footer />
+      </BrowserRouter>
     </div>
   );
 };

src/components/SearchFilters.tsx

@@ -0,0 +1,22 @@
+import { useCategories } from "../hooks/useCategories";
+import { useAppContext } from "../contexts/AppContext";
+
+const SearchFilters = () => {
+  const { category, setCategory } = useAppContext();
+  const { fetchedCategories } = useCategories();
+
+  return (
+    <div className="search-filters">
+      <select value={category} onChange={(e) => setCategory(e.target.value)}>
+        <option value="">All Categories</option>
+        {fetchedCategories.map((cat, idx) => (
+          <option key={idx} value={cat}>
+            {cat}
+          </option>
+        ))}
+      </select>
+    </div>
+  );
+};
+
+export default SearchFilters;

src/components/SearchInput.tsx

@@ -1,6 +1,31 @@
 import { SearchIcon } from "./Icons";
+import { useState, useCallback } from "react";
+import { useSearchParams, useNavigate } from "react-router-dom";
 
 const SearchInput = () => {
+  const navigate = useNavigate();
+  const [searchParams, setSearchParams] = useSearchParams();
+  const [searchValue, setSearchValue] = useState(searchParams.get("q") || "");
+
+  const debouncedSearch = useCallback(
+    debounce((query: string) => {
+      if (query) {
+        setSearchParams({ q: query });
+        navigate(`/search?q=${encodeURIComponent(query.trim().toLowerCase())}`);
+      } else {
+        setSearchParams({});
+        navigate("/");
+      }
+    }, 200),
+    [setSearchParams, navigate]
+  );
+
+  const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value;
+    setSearchValue(value);
+    debouncedSearch(value);
+  };
+
   return (
     <div className="search-field">
       <label htmlFor="search">
@@ -9,11 +34,25 @@ const SearchInput = () => {
       <input
         type="search"
         id="search"
+        value={searchValue}
+        onChange={handleSearch}
         placeholder="Search here..."
         autoComplete="off"
       />
     </div>
   );
 };
 
+// Debounce utility function
+function debounce<T extends (...args: any[]) => any>(
+  func: T,
+  wait: number
+): (...args: Parameters<T>) => void {
+  let timeout: ReturnType<typeof setTimeout>;
+  return (...args: Parameters<T>) => {
+    clearTimeout(timeout);
+    timeout = setTimeout(() => func(...args), wait);
+  };
+}
+
 export default SearchInput;

src/components/SnippetList.tsx

@@ -1,22 +1,25 @@
-import { useState } from "react";
+import { useState, useMemo } from "react";
 import { SnippetType } from "../types";
 import { useAppContext } from "../contexts/AppContext";
 import { useSnippets } from "../hooks/useSnippets";
 
 import SnippetModal from "./SnippetModal";
-import { LeftAngleArrowIcon } from "./Icons";
 
-const SnippetList = () => {
+const SnippetList = ({ query }: { query?: string | null }) => {
   const { language, snippet, setSnippet } = useAppContext();
-  const { fetchedSnippets } = useSnippets();
+  const { fetchedSnippets, loading } = useSnippets();
   const [isModalOpen, setIsModalOpen] = useState(false);
 
-  if (!fetchedSnippets)
-    return (
-      <div>
-        <LeftAngleArrowIcon />
-      </div>
+  const filteredSnippets = useMemo(() => {
+    if (!query) return fetchedSnippets;
+    return fetchedSnippets.filter((snippet) =>
+      snippet.title.toLowerCase().includes(query.toLowerCase())
     );
+  }, [fetchedSnippets, query]);
+
+  if (loading) return <div>Loading...</div>;
+  if (!filteredSnippets || filteredSnippets.length === 0)
+    return <div>No results found for "{query}"</div>;
 
   const handleOpenModal = (activeSnippet: SnippetType) => {
     setIsModalOpen(true);
@@ -31,7 +34,7 @@ const SnippetList = () => {
   return (
     <>
       <ul role="list" className="snippets">
-        {fetchedSnippets.map((snippet, idx) => (
+        {filteredSnippets.map((snippet, idx) => (
           <li key={idx}>
             <button
               className="snippet | flow"
@@ -41,8 +44,8 @@ const SnippetList = () => {
               <div className="snippet__preview">
                 <img src={language.icon} alt={language.lang} />
               </div>
-
               <h3 className="snippet__title">{snippet.title}</h3>
+              <p className="snippet__description">{snippet.description}</p>
             </button>
           </li>
         ))}

src/hooks/useCategories.ts

@@ -16,7 +16,8 @@ export const useCategories = () => {
   );
 
   const fetchedCategories = useMemo(() => {
-    return data ? data.map((item) => item.categoryName) : [];
+    const categories = data ? data.map((item) => item.categoryName) : [];
+    return ["All snippets", ...categories];
   }, [data]);
 
   return { fetchedCategories, loading, error };

src/hooks/useSnippets.ts

@@ -14,8 +14,10 @@ export const useSnippets = () => {
     `/data/${slugify(language.lang)}.json`
   );
 
-  const fetchedSnippets = data
-    ? data.find((item) => item.categoryName === category)?.snippets
+  const fetchedSnippets: SnippetType[] = data
+    ? category === "All snippets"
+      ? data.flatMap((item) => item.snippets)
+      : (data.find((item) => item.categoryName === category)?.snippets ?? [])
     : [];
 
   return { fetchedSnippets, loading, error };

src/pages/HomePage.tsx

@@ -0,0 +1,21 @@
+import { useAppContext } from "../contexts/AppContext";
+import SnippetList from "../components/SnippetList";
+import Sidebar from "../layouts/Sidebar";
+
+const HomePage = () => {
+  const { category } = useAppContext();
+
+  return (
+    <>
+      <Sidebar />
+      <section className="flow">
+        <h2 className="section-title">
+          {category ? category : "Select a category"}
+        </h2>
+        <SnippetList />
+      </section>
+    </>
+  );
+};
+
+export default HomePage;

src/pages/SearchPage.tsx

@@ -0,0 +1,20 @@
+import { useSearchParams } from "react-router-dom";
+import SnippetList from "../components/SnippetList";
+import Sidebar from "../layouts/Sidebar";
+
+const SearchPage = () => {
+  const [searchParams] = useSearchParams();
+  const query = searchParams.get("q");
+
+  return (
+    <>
+      <Sidebar />
+      <section className="flow">
+        <h2 className="section-title">Search Results for: {query}</h2>
+        <SnippetList query={query} />
+      </section>
+    </>
+  );
+};
+
+export default SearchPage;

src/styles/main.css

@@ -528,6 +528,21 @@ abbr {
 
 .snippet__title {
   color: var(--text-primary);
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
+  line-clamp: 1;
+  overflow: hidden;
+  text-overflow: "…";
+}
+
+.snippet__description {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
+  line-clamp: 1;
+  overflow: hidden;
+  text-overflow: "…";
 }
 
 /*------------------------------------*\