nitkkr-dev · som-04 · Sep 28, 2024 · Sep 28, 2024 · Sep 28, 2024 · Sep 28, 2024
diff --git a/app/[locale]/academics/curricula/[code]/page.tsx b/app/[locale]/academics/curricula/[code]/page.tsx
@@ -1,14 +1,194 @@
-import { WorkInProgressStatus } from '~/components/status';
+import Image from 'next/image';
+import Link from 'next/link';
+import { notFound } from 'next/navigation';
+import { MdEmail, MdPhone } from 'react-icons/md';
+
+import Heading from '~/components/heading';
+import ImageHeader from '~/components/image-header';
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from '~/components/ui';
+import { getTranslations } from '~/i18n/translations';
 import { courses, db } from '~/server/db';
 
 export async function generateStaticParams() {
   return await db.select({ code: courses.code }).from(courses);
 }
 
-export default function Curriculum({
-  params: { locale },
+export default async function Curriculum({
+  params: { locale, code },
 }: {
   params: { locale: string; code: string };
 }) {
-  return <WorkInProgressStatus locale={locale} />;
+  const text = (await getTranslations(locale)).Curriculum;
+  const course = await db.query.courses.findFirst({
+    where: (course, { eq }) => eq(course.code, code),
+    with: {
+      coordinator: {
+        with: {
+          person: {
+            columns: {
+              name: true,
+              telephone: true,
+              email: true,
+            },
+          },
+        },
+      },
+    },
+  });
+  if (!course) notFound();
+
+  return (
+    <>
+      <ImageHeader
+        title={`${course.code}\n${course.title}`} // to break course code and title into two different lines
+        src={`slideshow/image01.jpg`} //fixme: add specific images for course
+        className="whitespace-pre-line bg-neutral-300"
+      />
+
+      <main className="container mt-10">
+        <section className="md:flex">
+          <section className="container my-auto space-y-3 md:w-[60%]">
+            <h5 className="my-auto flex text-center">
+              {text.prerequisites.title}:
+              {course.prerequisites.length > 0 ? (
+                course.prerequisites.map((prerequisite, index) => (
+                  <Link
+                    href={`/academics/curricula/${prerequisite}`}
+                    key={index}
+                    className="ml-2"
+                  >
+                    <p>{prerequisite}</p>
+                  </Link>
+                ))
+              ) : (
+                <p className="my-auto ml-2">{text.prerequisites.none}</p>
+              )}
+            </h5>
+
+            <h5>
+              {text.nature}: <strong>{course.nature}</strong>
+            </h5>
+
+            <h5>{text.objectives}:</h5>
+            {course.objectives.map((objective, index) => (
+              <li key={index}>{objective}</li>
+            ))}
+
+            <h5 className="mb-2 flex">
+              {text.similarCourses}:
+              {course.similarCourses.map((course, index) => (
+                <Link
+                  href={`/academics/curricula/${course}`}
+                  key={index}
+                  className="ml-2"
+                >
+                  <p className="text-primary-300 underline">{course}</p>
+                </Link>
+              ))}
+            </h5>
+          </section>
+
+          <aside className="my-auto space-y-4 rounded-md border border-primary-500 bg-shade-light p-5 sm:h-auto md:h-60 md:w-[540px]">
+            <h4 className="mb-6">{text.coordinator}</h4>
+            <article className="flex space-x-4">
+              <Image
+                alt={course.coordinator.person.name}
+                className="size-32 rounded-lg bg-neutral-200"
+                src={`persons/${course.coordinator.id}/image.png`}
+                height={0}
+                width={0}
+              />
+              <section>
+                <h5 className="mb-1">{course.coordinator.person.name}</h5>
+                <p className="font-medium">{course.coordinator.designation}</p>
+                <p>
+                  <a
+                    className="text-primary-500 underline"
+                    href={`mailto:${course.coordinator.person.email}`}
+                  >
+                    <MdEmail className="mr-2 inline-block fill-primary-500" />
+
+                    {course.coordinator.person.email}
+                  </a>
+                </p>
+                <p>
+                  <MdPhone className="mr-2 inline-block fill-primary-500" />
+                  {course.coordinator.person.telephone}
+                </p>
+              </section>
+            </article>
+          </aside>
+        </section>
+
+        <article className="container">
+          <Heading
+            glyphDirection="ltr"
+            heading="h2"
+            id="heading"
+            text={text.content}
+          />
+          <section>
+            <Accordion type="single" collapsible>
+              {course.content.map((section, index) => (
+                <AccordionItem key={index} value={section.title}>
+                  <AccordionTrigger>{section.title}</AccordionTrigger>
+                  <AccordionContent>
+                    <ol className="list-decimal space-y-2 pl-5">
+                      {section.topics.map((topic, subIndex) => (
+                        <li key={subIndex}>
+                          <p>{topic}</p>
+                        </li>
+                      ))}
+                    </ol>
+                  </AccordionContent>
+                </AccordionItem>
+              ))}
+            </Accordion>
+          </section>
+        </article>
+
+        <section className="container">
+          <Heading
+            glyphDirection="ltr"
+            heading="h2"
+            id="heading"
+            text={text.outcomes}
+          />
+          <ol className="list-decimal space-y-4 px-12 font-serif text-primary-500">
+            {course.outcomes.map((outcome, index) => (
+              <li key={index}>
+                <h5>{outcome}</h5>
+              </li>
+            ))}
+          </ol>
+        </section>
+
+        <section className="container">
+          <Heading
+            glyphDirection="rtl"
+            heading="h2"
+            id="heading"
+            text={text.referenceBooks}
+          />
+
+          <section className="rounded-xl border border-primary-500 bg-neutral-50">
+            <ol className="flex list-disc flex-col space-y-4 p-12">
+              {course.essentialReading.map((book, index) => (
+                <li key={index}>
+                  <p className="font-medium text-primary-300 underline">
+                    {book}
+                  </p>
+                </li>
+              ))}
+            </ol>
+          </section>
+        </section>
+      </main>
+    </>
+  );
 }
diff --git a/app/[locale]/academics/curricula/page.tsx b/app/[locale]/academics/curricula/page.tsx
@@ -88,6 +88,8 @@ const Courses = async ({ page }: { page: number }) => {
     offset: (page - 1) * 10,
   });
 
+  console.log(courses);
+
   return courses.map(({ code, coursesToMajors, title }) =>
     coursesToMajors.map(
       ({ lectureCredits, practicalCredits, tutorialCredits, major }, index) => (

diff --git a/app/[locale]/header.tsx b/app/[locale]/header.tsx
@@ -10,6 +10,14 @@ import { Button, HamburgerButton } from '~/components/buttons';
 import { CtrlLink } from '~/components/link';
 import LocaleSwitcher from '~/components/locale-switcher';
 import MaybeLink from '~/components/maybe-link';
+import {
+  NavigationMenu,
+  NavigationMenuCustomListItem,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  navigationMenuTriggerStyle,
+} from '~/components/ui';
 import { getTranslations } from '~/i18n/translations';
 import { cn } from '~/lib/utils';
 import { getServerAuthSession } from '~/server/auth';
@@ -29,6 +37,43 @@ export default async function Header({ locale }: { locale: string }) {
     { label: text.alumni, href: 'alumni' },
     { label: text.activities, href: 'student-activities' },
   ];
+  const components: { title: string; href: string; description: string }[] = [
+    {
+      title: 'Alert Dialog',
+      href: '/docs/primitives/alert-dialog',
+      description:
+        'A modal dialog that interrupts the user with important content and expects a response.',
+    },
+    {
+      title: 'Hover Card',
+      href: '/docs/primitives/hover-card',
+      description:
+        'For sighted users to preview content available behind a link.',
+    },
+    {
+      title: 'Progress',
+      href: '/docs/primitives/progress',
+      description:
+        'Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.',
+    },
+    {
+      title: 'Scroll-area',
+      href: '/docs/primitives/scroll-area',
+      description: 'Visually or semantically separates content.',
+    },
+    {
+      title: 'Tabs',
+      href: '/docs/primitives/tabs',
+      description:
+        'A set of layered sections of content—known as tab panels—that are displayed one at a time.',
+    },
+    {
+      title: 'Tooltip',
+      href: '/docs/primitives/tooltip',
+      description:
+        'A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.',
+    },
+  ];
 
   return (
     <header className="header-sticky-ness sticky top-0 z-nav min-w-full bg-background">
@@ -48,16 +93,28 @@ export default async function Header({ locale }: { locale: string }) {
             src="assets/nitlogo.png"
           />
         </Link>
-
-        <ol className={cn('hidden grow lg:flex', 'gap-4 xl:gap-5 2xl:gap-6')}>
-          {items.map(({ label, href }, index) => (
-            <li className="my-auto min-h-fit" key={index}>
-              <Link href={`/${locale}/${href}`} prefetch>
-                {label}
+        <NavigationMenu>
+          <NavigationMenuList
+            className={cn('hidden grow lg:flex', 'gap-4 xl:gap-5 2xl:gap-6')}
+          >
+            <NavigationMenuCustomListItem
+              triggerName={items[0].label}
+              imageDetails={{
+                src: 'https://s3-alpha-sig.figma.com/img/054e/19b7/43c945f2ee30e43f797f944b1c02fe2e?Expires=1728259200&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=TjH6LvDVUoTwEvUvc02-8DAwccrJ9YRqDqTy5h-0O0cYSVWG03it8-zr5OSBcjGVuu5TMnV7ZlnEiM3CIHQ3mQAy7Z3~Bv2sbCL8plMbE0GDxzmjpaVkKPAfgbMpuyofWABnyQjH4cda6qWEzeBuGEw~KQfFxVuAA-wHYTA6GL~B776fRbfdfzNxtSqucrIEqfGG1nUMFEdxvTLMPCqXTjErPikIs2rDXtAZ3K3U4suPFFqLRyBQ9H0B3DAGDzxZ64CIVLkAaE~ALCRy1BBUDyXrU24E1~BeTobiCoR0q1WcnBOPMKpnUb0c2qTyaDz8BxMe9hMMI9vGnv4fxdqGBA__',
+                alt: items[0].label,
+                href: items[0].href,
+              }}
+              listItems={components}
+            />
+            <NavigationMenuItem>
+              <Link href="/docs" legacyBehavior passHref>
+                <NavigationMenuLink className={navigationMenuTriggerStyle()}>
+                  Documentation
+                </NavigationMenuLink>
               </Link>
-            </li>
-          ))}
-        </ol>
+            </NavigationMenuItem>
+          </NavigationMenuList>
+        </NavigationMenu>
 
         <ol className="inline-flex h-10 gap-2">
           <li className="flex h-full rounded-xl border border-neutral-500 bg-neutral-50">