Skip to content

feat: add subject search functionality #345

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
gayatripadalia wants to merge 1 commit into
base: main
Choose a base branch
from
Open

feat: add subject search functionality #345

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
329 changes: 329 additions & 0 deletions app/components/SearchBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,329 @@
"use client";

import { useMemo, useState } from "react";
import Link from "next/link";

const subjects = [
// Semester 1
{
semester: "Semester-1",
name: "Basic Electrical and Electronics",
href: "/sem1/bee/ch0",
},
{
semester: "Semester-1",
name: "Basics of Mechanical Engineering",
href: "/sem1/bme/ch0",
},
{
semester: "Semester-1",
name: "C Programming",
href: "/sem1/c/ch0",
},
{
semester: "Semester-1",
name: "Engineering Mathematics-1",
href: "/sem1/em1/ch0",
},
{
semester: "Semester-1",
name: "Engineering Physics",
href: "/sem1/ep/ch0",
},
{
semester: "Semester-1",
name: "Engineering Graphics & Design",
href: "/sem1/egd/ch0",
},
{
semester: "Semester-1",
name: "English Communication",
href: "/sem1/ec/ch0",
},

// Semester 2
{
semester: "Semester-2",
name: "Digital Electronics & Logic Circuits",
href: "/sem2/delc/ch0",
},
{
semester: "Semester-2",
name: "OOPs with Java",
href: "/sem2/oops/ch0",
},
{
semester: "Semester-2",
name: "Engineering Mathematics-2",
href: "/sem2/em2/ch0",
},
{
semester: "Semester-2",
name: "Data Structures using C",
href: "/sem2/dsc/ch0",
},
{
semester: "Semester-2",
name: "Modern Biology",
href: "/sem2/mb/ch0",
},
{
semester: "Semester-2",
name: "Environmental Studies",
href: "/sem2/es/ch0",
},

// Semester 3
{
semester: "Semester-3",
name: "Problem Solving using Python",
href: "/sem3/py/ch0",
},
{
semester: "Semester-3",
name: "Data Science using Python Libraries",
href: "/sem3/dsp/ch0",
},
{
semester: "Semester-3",
name: "Computer Organization & Architecture",
href: "/sem3/coa/ch0",
},
{
semester: "Semester-3",
name: "Probability & Statistics",
href: "/sem3/ps/ch0",
},
{
semester: "Semester-3",
name: "Theory of Computation",
href: "/sem3/toc/ch0",
},
{
semester: "Semester-3",
name: "Information Technology",
href: "/sem3/it/ch0",
},
{
semester: "Semester-3",
name: "Technical Writing",
href: "/sem3/tw/ch0",
},

// Semester 4
{
semester: "Semester-4",
name: "Discrete Mathematics",
href: "/sem4/dm/ch0",
},
{
semester: "Semester-4",
name: "Computer Networks",
href: "/sem4/cn/ch0",
},
{
semester: "Semester-4",
name: "Database Management Systems",
href: "/sem4/dbms/ch0",
},
{
semester: "Semester-4",
name: "Operating Systems",
href: "/sem4/os/ch0",
},
{
semester: "Semester-4",
name: "Web Technologies",
href: "/sem4/wt/ch0",
},
{
semester: "Semester-4",
name: "DevOps & Linux Administration",
href: "/sem4/dops/ch0",
},
{
semester: "Semester-4",
name: "Organizational Behavior",
href: "/sem4/ob/ch0",
},

// Semester 5
{
semester: "Semester-5",
name: "Artificial Intelligence",
href: "/sem5/ai/ch0",
},
{
semester: "Semester-5",
name: "Algorithm Design and Analysis",
href: "/sem5/ada/ch0",
},
{
semester: "Semester-5",
name: "Cloud Computing",
href: "/sem5/cc/ch0",
},
{
semester: "Semester-5",
name: "Economics for Engineers",
href: "/sem5/ee/ch0",
},
{
semester: "Semester-5",
name: "IoT (Internet of Things)",
href: "/sem5/iot/ch0",
},
{
semester: "Semester-5",
name: "Compiler Design",
href: "/sem5/cd/ch0",
},
{
semester: "Semester-5",
name: "Cyber Laws and Ethics",
href: "/sem5/cle/ch0",
},
{
semester: "Semester-5",
name: "Cryptography & Network Security",
href: "/sem5/cns/ch0",
},

// Semester 6
{
semester: "Semester-6",
name: "Machine Learning",
href: "/sem6/ml/ch0",
},
{
semester: "Semester-6",
name: "Natural Language Processing",
href: "/sem6/nlp/ch0",
},
{
semester: "Semester-6",
name: "Deep Learning",
href: "/sem6/dl/ch0",
},
{
semester: "Semester-6",
name: "Computer Vision and Image Processing",
href: "/sem6/cvip/ch0",
},
{
semester: "Semester-6",
name: "Blockchain Technology",
href: "/sem6/bt/ch0",
},
{
semester: "Semester-6",
name: "Information Retrieval",
href: "/sem6/ir/ch0",
},
{
semester: "Semester-6",
name: "Management Information Systems",
href: "/sem6/mis/ch0",
},

// Semester 7
{
semester: "Semester-7",
name: "VLSI and Embedded Systems",
href: "/sem7/vlsi/ch0",
},
{
semester: "Semester-7",
name: "Entrepreneurship & Startup",
href: "/sem7/es/ch0",
},
{
semester: "Semester-7",
name: "Financial Management",
href: "/sem7/fm/ch0",
},
{
semester: "Semester-7",
name: "Robotic Access Automation",
href: "/sem7/raa/ch0",
},
{
semester: "Semester-7",
name: "Marketing Management",
href: "/sem7/mm/ch0",
},
{
semester: "Semester-7",
name: "Big-data Analytics",
href: "/sem7/bda/ch0",
},
{
semester: "Semester-7",
name: "Decision Sciences",
href: "/sem7/des/ch0",
},

// Semester 8
{
semester: "Semester-8",
name: "Software Engineering",
href: "/sem8/se/ch0",
},
];

export default function SearchBar() {
const [query, setQuery] = useState("");

const results = useMemo(() => {
const search = query.trim().toLowerCase();

if (!search) return [];

return subjects
.filter(
(subject) =>
subject.name.toLowerCase().includes(search) ||
subject.semester.toLowerCase().includes(search)
)
.slice(0, 10);
}, [query]);

return (
<div className="px-6 mb-8 relative">
<input
type="text"
placeholder="Search by subject or semester..."
value={query}
onChange={(e) => setQuery(e.target.value)}
className="w-full border rounded-lg p-3 text-black bg-white shadow"
/>

{query && (
<div className="absolute left-6 right-6 bg-white border rounded-lg shadow-lg mt-1 z-40 max-h-72 overflow-y-auto">
{results.length ? (
results.map((item) => (
<Link
key={item.name}
href={item.href}
onClick={() => setQuery("")}
className="block p-3 hover:bg-gray-100 border-b"
>
<div className="font-semibold text-black">
{item.name}
</div>

<div className="text-sm text-gray-500">
{item.semester}
</div>
</Link>
))
) : (
<div className="p-3 text-gray-500">
No matching subject or semester was found.
</div>
)}
</div>
)}
</div>
);
}
3 changes: 3 additions & 0 deletions app/components/subjects.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
"use client";

import SearchBar from "./SearchBar";
import Link from "next/link";

const subjects = {
Expand Down Expand Up @@ -146,6 +148,7 @@ export default function SubjectsSection() {
>
Explore Subjects divided Semester-wise for your convenience.
</p>
<SearchBar />
<div
className="space-y-10 px-6 py-6 text-3xl flex flex-col"
style={{ fontFamily: "'Rockwell', 'Serif', serif" }}
Expand Down