Add Comprehensive Discrete Mathematics Content and Resource issue #208

app/components/Math.tsx

@@ -0,0 +1,17 @@
+"use client"
+
+import React from "react"
+import { InlineMath, BlockMath } from 'react-katex'
+import 'katex/dist/katex.min.css'
+
+type Props = { math: string; className?: string }
+
+export function Inline({ math, className = "" }: Props) {
+  return <InlineMath className={className} math={math} />
+}
+
+export function Block({ math, className = "" }: Props) {
+  return <BlockMath className={className} math={math} />
+}
+
+export default { Inline, Block }

app/components/subjects.tsx

@@ -100,7 +100,7 @@ const subjectCodes: Record<string, string> = {
   "Web Technologies": "wt",
   "DevOps & Linux Administration": "dops",
   "Organizational Behavior": "ob",
-  "Discrete Mathematics": "dm",
+  "Discrete Mathematics": "discrete",
 
   "Data Science using Python Libraries": "dsp",
   "Artificial Intelligence": "ai",
@@ -129,7 +129,7 @@ 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 available = ["ep", "c", "em1", "em2", "oops", "dsc", "coa", "os", "discrete","ml", "dops", "cd", "cle", "ec", "dbms", "bme", "cns", "vlsi", "mb"];
 
 export default function SubjectsSection() {
   return (

app/sem4/discrete/[chapter]/page.tsx

@@ -0,0 +1,132 @@
+import Link from "next/link";
+import { Ch0Content } from "../content/chapter0";
+import { Ch1Content } from "../content/chapter1";
+import { Ch2Content } from "../content/chapter2";
+import { Ch3Content } from "../content/chapter3";
+import { Ch4Content } from "../content/chapter4";
+import { Ch5Content } from "../content/chapter5";
+import { Ch6Content } from "../content/chapter6";
+import BookmarkButton from "../../../components/BookmarkButton";
+
+
+import ChapterQuizInline from "../components/ChapterQuizInline";
+import { ArrowBigLeft, ArrowBigRight } from "lucide-react";
+import { Righteous } from "next/font/google";
+import { moduleQuizzes } from "@/lib/quizData";
+
+const righteous = Righteous({
+  subsets: ["latin"],
+  weight: "400",
+  variable: "--font-righteous",
+});
+
+const chapters = [
+  { id: "ch0", title: "Course Outline", component: Ch0Content },
+  { id: "ch1", title: "Sets and Logic", component: Ch1Content },
+  { id: "ch2", title: "Relations and Functions", component: Ch2Content },
+  { id: "ch3", title: "Combinatorics and Counting", component: Ch3Content },
+  { id: "ch4", title: "Graph Theory", component: Ch4Content },
+  { id: "ch5", title: "Recurrence Relations", component: Ch5Content },
+  { id: "ch6", title: "Boolean Algebra and Automata", component: Ch6Content },
+];
+
+type ChapterProps = {
+  params: { chapter: string };
+};
+
+export default function ChapterPage({ params }: ChapterProps) {
+  const currentIndex = chapters.findIndex((c) => c.id === params.chapter);
+
+  const chapter = chapters[currentIndex];
+
+  if (!chapter) {
+    return <h1 className="text-2xl font-bold">Chapter not found</h1>;
+  }
+
+  const ChapterComponent = chapter.component;
+
+  const prevChapter = currentIndex > 0 ? chapters[currentIndex - 1] : null;
+  const nextChapter = currentIndex < chapters.length - 1 ? chapters[currentIndex + 1] : null;
+
+  const chapterQuizSlugMap: Record<string, string> = {};
+  const chapterQuiz = moduleQuizzes.find((quiz) => quiz.slug === chapterQuizSlugMap[params.chapter]);
+
+  return (
+    <div className="flex flex-col bg-[#1B0D00] min-h-full p-2 pt-6 text-[#e2d1c1]">
+      <div className="flex-1">
+        <h1 className={`text-4xl font-bold ${righteous.className} mb-2`}>Discrete Mathematics</h1>
+
+        <div className="flex items-center justify-between">
+          <p className={`text-2xl mt-[-8px] ${righteous.className}`}>{chapter.title}</p>
+          <BookmarkButton title={`Discrete: ${chapter.title}`} />
+        </div>
+
+        <div className="flex justify-between mt-3">
+          {prevChapter ? (
+            <Link
+              href={`/sem4/discrete/${prevChapter.id}`}
+              className="px-4 py-1 text-2xl flex items-center justify-center bg-[#e2d1c1] text-[#1b0d00] rounded hover:bg-[#ac9e91] transition"
+              style={{ fontFamily: "Rockwell, Serif, serif" }}
+            >
+              <ArrowBigLeft className="inline-block mr-1" />
+              Previous
+            </Link>
+          ) : (
+            <div />
+          )}
+
+          {nextChapter ? (
+            <Link
+              href={`/sem4/discrete/${nextChapter.id}`}
+              className="px-4 py-1 text-2xl flex items-center justify-center bg-[#e2d1c1] text-[#1b0d00] rounded hover:bg-[#ac9e91] transition"
+              style={{ fontFamily: "Rockwell, Serif, serif" }}
+            >
+              Next
+              <ArrowBigRight className="inline-block ml-1" />
+            </Link>
+          ) : (
+            <div />
+          )}
+        </div>
+
+        <hr className="my-6 border-t-3" />
+
+        <ChapterComponent />
+
+        {chapterQuiz ? (
+          <div className="mt-12">
+            <ChapterQuizInline quiz={chapterQuiz} />
+          </div>
+        ) : null}
+      </div>
+
+      <div className="flex justify-between my-8">
+        {prevChapter ? (
+          <Link
+            href={`/sem4/discrete/${prevChapter.id}`}
+            className="px-4 py-2 bg-[#e2d1c1] text-xl flex items-center justify-center text-[#1b0d00] rounded hover:bg-[#ac9e91] transition"
+            style={{ fontFamily: "Rockwell, Serif, serif" }}
+          >
+            <ArrowBigLeft className="inline-block mr-1" />
+            {prevChapter.title}
+          </Link>
+        ) : (
+          <div />
+        )}
+
+        {nextChapter ? (
+          <Link
+            href={`/sem4/discrete/${nextChapter.id}`}
+            className="px-4 py-2 bg-[#e2d1c1] text-xl flex items-center justify-center text-[#1b0d00] rounded hover:bg-[#ac9e91] transition"
+            style={{ fontFamily: "Rockwell, Serif, serif" }}
+          >
+            {nextChapter.title}
+            <ArrowBigRight className="inline-block ml-1" />
+          </Link>
+        ) : (
+          <div />
+        )}
+      </div>
+    </div>
+  );
+}

app/sem4/discrete/components/ChapterQuizInline.tsx

@@ -0,0 +1,47 @@
+"use client";
+
+import { useState } from "react";
+import type { Quiz } from "@/lib/quizData";
+import QuizClient from "@/app/quiz/[slug]/QuizClient";
+
+interface Props {
+  quiz: Quiz;
+}
+
+export default function ChapterQuizInline({ quiz }: Props) {
+  const [showQuiz, setShowQuiz] = useState(false);
+
+  if (showQuiz) {
+    return <QuizClient quiz={quiz} inline autoStart onClose={() => setShowQuiz(false)} />;
+  }
+
+  return (
+    <div className="w-full">
+      <div className="w-full rounded-3xl border border-[#c7a669] bg-[#2a1b0f] p-8 shadow-xl text-left">
+        <p className="text-lg text-[#f5e7c3] mb-4" style={{ fontFamily: "Rockwell, serif" }}>
+          Ready to test your {quiz.moduleTitle} knowledge?
+        </p>
+        <h2 className="text-3xl font-bold text-[#f0d7a8] mb-3" style={{ fontFamily: "Rockwell, serif" }}>
+          {quiz.moduleTitle}
+        </h2>
+        <p className="text-base text-[#dcd2b8] mb-3" style={{ fontFamily: "Rockwell, serif" }}>
+          {quiz.description}
+        </p>
+        <div className="text-sm text-[#a07840] mb-6 flex flex-wrap gap-3" style={{ fontFamily: "Rockwell, serif" }}>
+          <span>{Math.min(5, quiz.questions.length)} questions</span>
+          <span>·</span>
+          <span>No time limit</span>
+          <span>·</span>
+          <span>Instant feedback</span>
+        </div>
+        <button
+          onClick={() => setShowQuiz(true)}
+          className="rounded-full bg-[#e2d1c1] px-6 py-3 text-xl font-semibold text-[#1b0d00] hover:bg-[#f7e0b3] transition"
+          style={{ fontFamily: "Rockwell, serif" }}
+        >
+          Take Chapter Quiz
+        </button>
+      </div>
+    </div>
+  );
+}

app/sem4/discrete/components/sidebar.tsx

@@ -0,0 +1,91 @@
+"use client";
+import { Righteous } from "next/font/google";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { useState, useEffect } from "react";
+
+const righteous = Righteous({
+  subsets: ["latin"],
+  weight: "400",
+  variable: "--font-righteous",
+});
+
+export default function Sidebar() {
+  const pathname = usePathname();
+  const [open, setOpen] = useState(false);
+
+  useEffect(() => {
+    if (window.innerWidth >= 768) {
+      setOpen(true);
+    }
+  }, []);
+
+const chapters = [
+  { id: "ch0", title: "Chapter 0: Course Outline" },
+  { id: "ch1", title: "Chapter 1: Mathematical Logic and Proofs" },
+  { id: "ch2", title: "Chapter 2: Set Theory, Relations, and Functions" },
+  { id: "ch3", title: "Chapter 3: Combinatorics, Number Theory, and Recurrence Relations" },
+  { id: "ch4", title: "Chapter 4: Graph Theory" },
+  { id: "ch5", title: "Chapter 5: Algebraic Structures" },
+];
+
+  return (
+    <>
+      <div
+        className={`fixed inset-0 md:hidden bg-black/50 z-30 transition-opacity duration-300 ${open ? "opacity-100" : "opacity-0 pointer-events-none"}`}
+        onClick={() => setOpen(false)}
+      />
+
+      <div className="flex sticky top-14 z-40 h-[calc(100vh-3.5rem)] w-[50px] md:w-auto pointer-events-none md:pointer-events-auto">
+        <aside
+          className={`h-full shrink-0 bg-[#fae8d7] text-[#1B0D00] p-0 flex flex-col transition-all duration-300 pointer-events-auto border-r-0 ${
+            open ? "w-64 border-r-2 md:border-r-0" : "w-0 overflow-hidden"
+          }`}
+        >
+          <h2
+            className="flex items-center text-2xl font-normal pt-3 pl-3 mb-2 bg-[#cebb9c] text-[#1B0D00] pb-2 border-b-4 border-[#1B0D00]"
+            style={{ fontFamily: "Rockwell, Serif, serif" }}
+          >
+            Chapters
+          </h2>
+          <ul className="flex-1 overflow-y-auto no-scrollbar space-y-0">
+            {chapters.map((ch) => {
+              const active = pathname === `/sem4/discrete/${ch.id}`;
+              return (
+                <li key={ch.id}>
+                  <Link
+                    href={`/sem4/discrete/${ch.id}`}
+                    className={`block px-3 py-2 text-xl transition ${
+                      active ? "bg-[#fccc7e]" : "hover:bg-[#ffdda7af]"
+                    } ${righteous.className}`}
+                  >
+                    {ch.title}
+                  </Link>
+                </li>
+              );
+            })}
+          </ul>
+        </aside>
+
+        <button
+          onClick={() => setOpen(!open)}
+          className="toggle-sidebar shrink-0 pointer-events-auto bg-[#ffdda7] h-full w-[50px] text-[#1B0D00] text-center font-semibold text-2xl border-l-4 rounded-r-2xl border-[#1B0D00] flex items-center justify-center transition-all duration-300 md:shadow-none"
+          style={{
+            fontFamily: "Rockwell, Serif, serif",
+          }}
+        >
+          <p className="leading-5">
+            C
+            <br />H
+            <br />A
+            <br />P
+            <br />T
+            <br />E
+            <br />R
+            <br />S
+          </p>
+        </button>
+      </div>
+    </>
+  );
+}