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,18 +1,63 @@
 import { SearchIcon } from "./Icons";
+import { useState, useCallback } from "react";
+import { useSearchParams, useNavigate, useLocation } from "react-router-dom";
 
 const SearchInput = () => {
+  const navigate = useNavigate();
+  const location = useLocation();
+  const [searchParams, setSearchParams] = useSearchParams();
+  const [searchValue, setSearchValue] = useState(searchParams.get("q") || "");
+
+  const navigateToSearch = useCallback(
+    (query: string, isCompletedSearch = false) => {
+      const trimmedQuery = query.trim().toLowerCase();
+
+      if (!trimmedQuery) {
+        // Remove search params and navigate to home if query is empty
+        setSearchParams({});
+        navigate("/", { replace: true });
+        return;
+      }
+
+      // Set the search params with the query
+      // Use replace: true for keypresses (when isCompletedSearch is false)
+      setSearchParams({ q: trimmedQuery }, { replace: !isCompletedSearch });
+
+      // Only navigate if we're not already on the search page
+      if (location.pathname !== "/search") {
+        navigate("/search", {
+          replace: isCompletedSearch || location.pathname === "/search",
+        });
+      }
+    },
+    [navigate, location.pathname, setSearchParams]
+  );
+
   return (
-    <div className="search-field">
+    <form
+      onSubmit={(e) => {
+        e.preventDefault();
+        navigateToSearch(searchValue, true);
+      }}
+      className="search-field"
+    >
       <label htmlFor="search">
         <SearchIcon />
       </label>
       <input
         type="search"
         id="search"
+        value={searchValue}
+        onChange={(e) => {
+          const newValue = e.target.value;
+          setSearchValue(newValue);
+          navigateToSearch(newValue, false);
+        }}
+        onBlur={() => navigateToSearch(searchValue, true)}
         placeholder="Search here..."
         autoComplete="off"
       />
-    </div>
+    </form>
   );
 };
 

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

@@ -8,15 +8,28 @@ type CategoryData = {
   snippets: SnippetType[];
 };
 
+const getSnippetsFromData = (
+  data: CategoryData[] | null,
+  category: string
+): SnippetType[] => {
+  if (!data?.length) {
+    return [];
+  }
+
+  if (category === "All snippets") {
+    return data.flatMap((item) => item.snippets);
+  }
+
+  const categoryData = data.find((item) => item.categoryName === category);
+  return categoryData?.snippets ?? [];
+};
+
 export const useSnippets = () => {
   const { language, category } = useAppContext();
-  const { data, loading, error } = useFetch<CategoryData[]>(
-    `/data/${slugify(language.lang)}.json`
-  );
+  const endpoint = `/data/${slugify(language.lang)}.json`;
+  const { data, loading, error } = useFetch<CategoryData[]>(endpoint);
 
-  const fetchedSnippets = data
-    ? data.find((item) => item.categoryName === category)?.snippets
-    : [];
+  const fetchedSnippets = getSnippetsFromData(data, category);
 
   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: "…";
 }
 
 /*------------------------------------*\