From fb61d222dc67c2a4f374bed3897b7527f422ad67 Mon Sep 17 00:00:00 2001
From: Diksha Mohite <dikshamohite184@gmail.com>
Date: Sat, 20 Jun 2026 16:49:23 +0530
Subject: [PATCH] feat: add search bar for quick subject navigation (#269)

---
 app/components/subjects.tsx | 91 +++++++++++++++++++++++++++++++++++--
 1 file changed, 87 insertions(+), 4 deletions(-)

diff --git a/app/components/subjects.tsx b/app/components/subjects.tsx
index 588c63a..0e6d046 100644
--- a/app/components/subjects.tsx
+++ b/app/components/subjects.tsx
@@ -1,5 +1,8 @@
 "use client";
 import Link from "next/link";
+import { Search } from "lucide-react";
+import { useMemo, useState } from "react";
+
 
 const subjects = {
   "Semester-1": [
@@ -131,7 +134,41 @@ const subjectCodes: Record<string, string> = {
 // Available subjects
 const available = ["ep", "c", "em1", "em2", "oops", "dsc", "coa", "os", "ml", "dops", "cd", "cle", "ec", "dbms", "bme", "cns", "vlsi", "mb"];
 
+
+const matchesSearch = (subject: string, searchTerm: string) => {
+  if (!searchTerm) return true;
+
+  const query = searchTerm.toLowerCase().trim();
+
+  const words = subject
+    .toLowerCase()
+    .split(/[\s&()-]+/)
+    .filter(Boolean);
+
+  const abbreviation = words.map(word => word[0]).join("");
+
+  const searchableText = [
+    subject.toLowerCase(),
+    ...words,
+    abbreviation,
+    subjectCodes[subject],
+  ]
+  .filter(Boolean)
+  .join(" ");
+
+  return searchableText.includes(query);
+};
+
 export default function SubjectsSection() {
+  const [searchTerm, setSearchTerm] = useState("");
+  const noResults = useMemo(
+  () =>
+    Object.values(subjects)
+      .flat()
+      .filter((subj) => matchesSearch(subj, searchTerm))
+      .length === 0,
+  [searchTerm]
+);
   return (
     <section id="subjects" className="px-6 pb-12 md:pt-12 text-center scroll-mt-20">
       <h2
@@ -146,23 +183,69 @@ export default function SubjectsSection() {
       >
         Explore Subjects divided Semester-wise for your convenience.
       </p>
+      <div className="mb-8 flex justify-center px-4">
+        <div className="relative w-full max-w-xl">
+        <Search
+          size={20}
+          className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-500"
+        />
+
+       <input
+          type="text"
+          placeholder="Search subjects..."
+          value={searchTerm}
+          onChange={(e) => setSearchTerm(e.target.value)}
+          className="
+            w-full
+            pl-12
+            pr-4
+            py-3
+            rounded-full
+            border-2
+            border-[#9a7b4f]
+            bg-[#f8f8f8]
+            text-black
+            shadow-md
+            focus:outline-none
+            focus:ring-2
+            focus:ring-[#d2b48c]
+            transition-all duration-200
+            "
+        />
+      </div>
+    </div>
       <div
         className="space-y-10 px-6 py-6 text-3xl flex flex-col"
         style={{ fontFamily: "'Rockwell', 'Serif', serif" }}
       >
+      {noResults && searchTerm && (
+      <div
+        className="text-xl text-[#8B4513] py-4"
+        style={{ fontFamily: "'Rockwell', 'Serif', serif" }}
+      >
+        No results found. Try another keyword.
+      </div>
+    )}
+
         {Object.entries(subjects).map(([semester, list]) => {
+
+          const filteredList = list.filter((subj) =>
+              matchesSearch(subj, searchTerm)
+          );
+
+  if (filteredList.length === 0) return null;
           const semCode = semester.toLowerCase().replace("semester-", "sem");
           return (
             <div key={semester}>
               <h3 className="text-3xl flex mb-4">{semester}</h3>
               <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
-                {list.map((subj) => {
+                {filteredList.map((subj) => {
                   const code = subjectCodes[subj];
                   const href = `/${semCode}/${code}/ch0`;
                   const isAvailable = available.includes(code);
 
                   const baseClass =
-                    "relative bg-[#d2b48c] text-[#2b1b0e] flex items-center justify-center font-medium py-4 px-6 shadow-md";
+          "relative bg-[#d2b48c] text-[#2b1b0e] flex items-center justify-center font-medium py-4 px-6 shadow-md transition-all duration-200";
 
                   return isAvailable ? (
                     <Link
@@ -177,7 +260,7 @@ export default function SubjectsSection() {
                       key={subj}
                       className={`${baseClass} opacity-50 cursor-not-allowed`}
                     >
-                      {subj}
+                        {subj}
                       <span className="absolute bottom-1 right-1 text-xs bg-[#2b1b0e] text-white px-2 py-0.5 rounded">
                         Coming Soon
                       </span>
@@ -192,4 +275,4 @@ export default function SubjectsSection() {
 
     </section>
   );
-}
+}
\ No newline at end of file