add: search bars for posts

Author: Llewellyn500

components/Articles/Articles.tsx

@@ -26,6 +26,7 @@ export default function Articles() {
   const [articles, setArticles] = useState<Article[]>([]);
   const [labels, setLabels] = useState<string[]>([]);
   const [selectedLabel, setSelectedLabel] = useState("All");
+  const [searchTerm, setSearchTerm] = useState("");
   const [loading, setLoading] = useState(true);
 
   useEffect(() => {
@@ -51,83 +52,103 @@ export default function Articles() {
               }) || "No date"
             } as Article;
           })
-          // Filter out articles that are not published
+          // Filter out unpublished
           .filter(article => article.publish === true);
 
-        // Fetch authors and map to articles
+        // Fetch authors
         const authorsSnapshot = await getDocs(collection(db, "authors"));
         const authors = authorsSnapshot.docs.map(doc => ({
           uid: doc.id,
           name: doc.data().name,
-          ...doc.data(),
         }));
 
-        const articlesWithAuthors = articlesData.map(article => ({
+        const withAuthors = articlesData.map(article => ({
           ...article,
           authorName:
             authors.find(a => a.uid === article.authorUID)?.name ||
             "Unknown Author"
         }));
 
-        // Get unique labels from the published articles
+        // Unique labels
         const uniqueLabels = Array.from(
-          new Set(articlesData.map(article => article.label))
+          new Set(articlesData.map(a => a.label))
         );
         setLabels(["All", ...uniqueLabels]);
 
-        setArticles(articlesWithAuthors);
-        setLoading(false);
+        setArticles(withAuthors);
       } catch (error) {
         console.error("Error fetching data:", error);
+      } finally {
         setLoading(false);
       }
     };
 
     fetchData();
   }, []);
 
-  const filteredArticles =
-    selectedLabel === "All"
-      ? articles
-      : articles.filter(article => article.label === selectedLabel);
+  if (loading) return <Loading />;
 
-  if (loading) {
-    return <Loading />;
-  }
+  // First filter by label, then by search term (title OR description)
+  const filtered = articles
+    .filter(a =>
+      selectedLabel === "All" ? true : a.label === selectedLabel
+    )
+    .filter(a =>
+      a.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
+      a.description.toLowerCase().includes(searchTerm.toLowerCase())
+    );
 
   return (
     <div className="max-w-[95rem] w-full mx-auto">
-      <div className="flex flex-wrap justify-between items-center gap-2 md:gap-0 my-6">
+      {/* --- Search Bar --- */}
+      <div className="my-6 ">
+        <input
+          type="text"
+          placeholder="Search posts..."
+          value={searchTerm}
+          onChange={e => setSearchTerm(e.target.value)}
+          className="w-full md:w-1/2 px-4 py-2 border border-white bg-transparent text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-white transition"
+        />
+      </div>
+
+      {/* --- Category Filters --- */}
+      <div className="flex flex-wrap justify-between items-center gap-2 md:gap-0 mb-6">
         <p className="font-semibold uppercase">Categories</p>
         <div className="flex flex-wrap gap-2">
-          {labels.map((label, index) => (
+          {labels.map((label, i) => (
             <Button
-              className={`px-3 py-2 bg-[#121212] text-white hover:bg-white hover:text-black border border-white rounded-full transition ease-in-out duration-300 ${
-                label === selectedLabel ? "bg-white text-black" : "border-white"
-              }`}
-              key={index}
+              key={i}
               onClick={() => setSelectedLabel(label)}
+              className={`
+                px-3 py-2 border rounded-full transition ease-in-out duration-300
+                ${
+                  label === selectedLabel
+                    ? "bg-white text-black"
+                    : "bg-transparent text-white border-white hover:bg-white hover:text-black"
+                }
+              `}
             >
               {label}
             </Button>
           ))}
         </div>
       </div>
-      
-      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 border-collapse mb-48">
-        {filteredArticles.map((article) => (
+
+      {/* --- Articles Grid --- */}
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-48">
+        {filtered.map(article => (
           <article className="border border-white p-8" key={article.id}>
             <div className="flex items-center justify-between">
               <time dateTime={article.date}>{article.date}</time>
-              <span className="px-3 py-2 border border-white rounded-full">
-                <p className="uppercase">{article.label}</p>
+              <span className="px-3 py-2 border border-white rounded-full uppercase">
+                {article.label}
               </span>
             </div>
-            <Link href={`posts/${article.slug}`}>
+            <Link href={`/posts/${article.slug}`}>
               <img
-                className="w-full my-8 hover:scale-105 transition"
                 src={article.img}
                 alt={article.imgAlt}
+                className="w-full my-8 hover:scale-105 transition"
               />
             </Link>
             <h2 className="heading3-title mb-3">
@@ -148,6 +169,11 @@ export default function Articles() {
             </div>
           </article>
         ))}
+        {filtered.length === 0 && (
+          <p className="col-span-full text-center text-gray-400">
+            No articles found.
+          </p>
+        )}
       </div>
     </div>
   );

components/Header.tsx

@@ -1,13 +1,91 @@
+"use client";
+
 import Link from "next/link";
 import menuLinks from "@/data/menu";
 import SocialSharing from "./SocialSharing";
 import { Sheet, SheetContent, SheetTrigger } from "./ui/sheet";
-import { RiInstagramLine, RiTwitterFill, RiYoutubeFill, RiGithubFill, RiTiktokFill, RiPatreonFill } from "react-icons/ri";
+import {
+  RiInstagramLine,
+  RiTwitterFill,
+  RiYoutubeFill,
+  RiGithubFill,
+  RiTiktokFill,
+  RiPatreonFill,
+} from "react-icons/ri";
+
+import { useState, useEffect, useRef } from "react";
+import { collection, getDocs, query, orderBy } from "firebase/firestore";
+import { db } from "@/lib/firebase";
+
+interface SearchItem {
+  id: string;
+  title: string;
+  slug: string;
+  img: string;
+  imgAlt: string;
+}
 
 export default function Header() {
+  const [allArticles, setAllArticles] = useState<SearchItem[]>([]);
+  const [searchTerm, setSearchTerm] = useState("");
+  const [suggestions, setSuggestions] = useState<SearchItem[]>([]);
+  const [isOpen, setIsOpen] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  // Fetch minimal article data on mount
+  useEffect(() => {
+    (async () => {
+      const q = query(collection(db, "articles"), orderBy("date", "desc"));
+      const snap = await getDocs(q);
+      const items = snap.docs
+        // only published
+        .filter((d) => (d.data() as any).publish === true)
+        .map((d) => {
+          const data = d.data() as any;
+          return {
+            id: d.id,
+            title: data.title,
+            slug: data.slug,
+            img: data.img,
+            imgAlt: data.imgAlt || data.title,
+          } as SearchItem;
+        });
+      setAllArticles(items);
+    })();
+  }, []);
+
+  // update suggestions when searchTerm changes
+  useEffect(() => {
+    if (searchTerm.length >= 2) {
+      const term = searchTerm.toLowerCase();
+      setSuggestions(
+        allArticles.filter((a) => a.title.toLowerCase().includes(term))
+      );
+      setIsOpen(true);
+    } else {
+      setIsOpen(false);
+      setSuggestions([]);
+    }
+  }, [searchTerm, allArticles]);
+
+  // close dropdown when clicking outside
+  useEffect(() => {
+    const handleClick = (e: MouseEvent) => {
+      if (
+        containerRef.current &&
+        !containerRef.current.contains(e.target as Node)
+      ) {
+        setIsOpen(false);
+      }
+    };
+    document.addEventListener("click", handleClick);
+    return () => document.removeEventListener("click", handleClick);
+  }, []);
+
   return (
     <header className="flex flex-col justify-between max-w-[95rem] w-full mx-auto px-4 md:pt-8 pt-4 lg:pb-4 md:pb-4 sm:pb-2 xs:pb-2">
       <div className="flex">
+        {/* Logo */}
         <div className="flex flex-1">
           <Link href="/" aria-label="Return to homepage">
             <img
@@ -17,8 +95,12 @@ export default function Header() {
             />
           </Link>
         </div>
+
+        {/* Mobile menu */}
         <Sheet>
+          
           <SheetTrigger aria-labelledby="button-label">
+            
             <span id="button-label" hidden>
               Menu
             </span>
@@ -41,13 +123,10 @@ export default function Header() {
             className="w-full pt-14"
             aria-label="Menu Toggle"
           >
-            <nav
-              className="flex flex-col flex-1 justify-end gap-6"
-              aria-labelledby="mobile-nav"
-            >
-              {menuLinks.map((menuItem, index) => (
-                <Link key={index} href={menuItem.href}>
-                  {menuItem.label}
+            <nav className="flex flex-col flex-1 justify-end gap-6"               aria-labelledby="mobile-nav">
+              {menuLinks.map((m, i) => (
+                <Link key={i} href={m.href}>
+                  {m.label}
                 </Link>
               ))}
               <svg
@@ -88,21 +167,58 @@ export default function Header() {
                   },
                   {
                     href: "http://patreon.com/lap_mgmt",
-                    ariaLabel: "Visit our GitHub page",
+                    ariaLabel: "Visit our Patreon page",
                     Icon: RiPatreonFill,
                   },
                 ]}
               />
             </nav>
           </SheetContent>
         </Sheet>
-        <nav
-          className="flex-1 items-center justify-end gap-6 hidden md:flex"
-          aria-labelledby="desktop-nav"
-        >
-          {menuLinks.map((menuItem, index) => (
-            <Link key={index} href={menuItem.href} className="hover:text-[#8a2be2] transition ease-in-out duration-300">
-              {menuItem.label}
+
+        {/* Desktop nav */}
+        <nav className="hidden md:flex flex-1 items-center justify-end gap-6"          aria-labelledby="desktop-nav">
+          {/* Search box */}
+        <div ref={containerRef} className="relative ml-6 w-64">
+          <input
+            type="text"
+            placeholder="Search…"
+            value={searchTerm}
+            onChange={(e) => setSearchTerm(e.target.value)}
+            className="w-full px-3 py-2 bg-[#121212] text-white border border-white focus:outline-none"
+          />
+
+          {isOpen && suggestions.length > 0 && (
+            <ul className="absolute right-0 mt-1 w-full bg-[#121212] border border-white/60 shadow-lg max-h-60 overflow-auto z-50">
+              {suggestions.map((art) => (
+                <li
+                  key={art.id}
+                  className="flex items-center gap-2 px-3 py-2 hover:bg-[#892be250] transition"
+                >
+                  <img
+                    src={art.img}
+                    alt={art.imgAlt}
+                    className="w-10 h-10 object-cover rounded"
+                  />
+                  <Link
+                    href={`/posts/${art.slug}`}
+                    onClick={() => setIsOpen(false)}
+                    className="truncate text-white"
+                  >
+                    {art.title}
+                  </Link>
+                </li>
+              ))}
+            </ul>
+          )}
+        </div>
+          {menuLinks.map((m, i) => (
+            <Link
+              key={i}
+              href={m.href}
+              className="hover:text-[#8a2be2] transition ease-in-out duration-300"
+            >
+              {m.label}
             </Link>
           ))}
           <svg
@@ -114,6 +230,7 @@ export default function Header() {
           >
             <rect width="15" height="1" fill="white" />
           </svg>
+          
           <SocialSharing
             links={[
               {
@@ -143,13 +260,16 @@ export default function Header() {
               },
               {
                 href: "http://patreon.com/lap_mgmt",
-                ariaLabel: "Visit our GitHub page",
+                ariaLabel: "Visit our Patreon page",
                 Icon: RiPatreonFill,
               },
             ]}
           />
         </nav>
+
+        
       </div>
+
       <hr className="border-white border-t-0 border mt-4" />
     </header>
   );