feat: upcoming paper grid

Author: Abh1noob

package.json

@@ -32,9 +32,12 @@
     "clsx": "^2.1.1",
     "cmdk": "1.0.0",
     "debounce": "^2.2.0",
+    "embla-carousel-autoplay": "^8.6.0",
+    "embla-carousel-react": "^8.6.0",
     "fuse.js": "^7.1.0",
     "geist": "^1.3.1",
     "jose": "^5.10.0",
+    "lodash": "^4.17.21",
     "lucide-react": "^0.395.0",
     "mongoose": "^8.13.2",
     "next": "^14.2.28",

pnpm-lock.yaml

@@ -22,11 +22,9 @@ export async function GET() {
     const correspondingSlots = [slot + "1", slot + "2"];
     const selectedSubjects = await UpcomingSubject.find({
       slots: { $in: correspondingSlots }, // Match any slot in the array
-    }).limit(8);
-    const subbbb = await UpcomingSubject.find({
-
-    }).limit(8);
-    console.log(correspondingSlots, subbbb)
+    });
+    const subbbb = await UpcomingSubject.find({});
+    console.log(correspondingSlots, subbbb);
     if (selectedSubjects.length === 0) {
       return NextResponse.json(
         {

src/app/api/upcoming-papers/route.ts

@@ -10,7 +10,7 @@ function Navbar() {
   const pathname = usePathname();
 
   return (
-    <div className="sticky top-0 z-10 flex h-[85px] w-full items-center justify-between gap-x-3 overflow-hidden bg-[#B2B8FF] px-2 py-6 dark:bg-[#1d162d] md:px-12">
+    <div className="sticky top-0 z-10 flex h-[85px] w-full items-center justify-between gap-x-3 overflow-hidden bg-[#B2B8FF] px-2 py-6 dark:bg-[#130E1F] md:px-12">
       <div className="flex items-center gap-x-2 md:w-auto">
         <a href="https://www.codechefvit.com/" className="inline-block">
           <Image

src/components/Navbar.tsx

@@ -1,47 +1,107 @@
 "use client";
-import papers from "ongoing-papers";
 import { useEffect, useState } from "react";
 import axios from "axios";
 import { type IUpcomingPaper } from "@/interface";
 import Loader from "./ui/loader";
 import UpcomingPaper from "./UpcomingPaper";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+} from "@/components/ui/carousel";
+import Autoplay from "embla-carousel-autoplay";
+import { chunkArray } from "@/util/utils";
 
 function StoredPapers() {
   const [displayPapers, setDisplayPapers] = useState<IUpcomingPaper[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [chunkSize, setChunkSize] = useState<number>(4);
+
+  useEffect(() => {
+    const handleResize = () => {
+      if (window.innerWidth < 640) {
+        setChunkSize(4);
+      } else {
+        setChunkSize(8);
+      }
+    };
+
+    handleResize();
+    window.addEventListener("resize", handleResize);
+
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, []);
+
+  const chunkedPapers = chunkArray(displayPapers, chunkSize);
 
   useEffect(() => {
     async function fetchPapers() {
       try {
+        setIsLoading(true);
         const response = await axios.get<IUpcomingPaper[]>(
           "/api/upcoming-papers",
         );
         setDisplayPapers(response.data);
       } catch (error) {
         console.error("Failed to fetch papers:", error);
+      } finally {
+        setIsLoading(false);
       }
     }
 
     void fetchPapers();
   }, []);
 
-  if (displayPapers.length === 0) {
+  if (isLoading) {
     return <Loader prop="m-10" />;
   }
 
+  const plugins = [Autoplay({ delay: 3000, stopOnInteraction: true })];
+
   return (
-    <div className="h-min">
+    <div className="px-4">
       <p className="play my-8 text-center text-lg font-semibold">
         Upcoming Papers
       </p>
 
-      <div className="grid grid-cols-1 justify-center gap-6 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-4 px-6">
-        {displayPapers.map((paper: IUpcomingPaper) => (
-          <UpcomingPaper
-            key={paper.subject}
-            subject={paper.subject}
-            slots={paper.slots}
-          />
-        ))}
+      <div className="">
+        <Carousel
+          opts={{
+            align: "start",
+            loop: true,
+          }}
+          plugins={plugins}
+          className="w-full"
+        >
+          <div className="relative mt-4 flex justify-end gap-4">
+            <CarouselPrevious className="relative" />
+            <CarouselNext className="relative" />
+          </div>
+          <CarouselContent>
+            {chunkedPapers.map((paperGroup, index) => {
+              console.log(8 - paperGroup.length);
+              return (
+                <CarouselItem
+                  key={`carousel-item-${index}`}
+                  className="grid grid-cols-2 grid-rows-2 gap-4 md:grid-cols-4 lg:auto-rows-fr"
+                >
+                  {paperGroup.map((paper, subIndex) => (
+                    <div key={subIndex} className="h-full">
+                      <UpcomingPaper
+                        subject={paper.subject}
+                        slots={paper.slots}
+                      />
+                    </div>
+                  ))}
+                </CarouselItem>
+              );
+            })}
+          </CarouselContent>
+        </Carousel>
       </div>
     </div>
   );

src/components/StoredPapers.tsx

@@ -33,18 +33,18 @@ export default function PaperCard({ subject, slots }: PaperCardProps) {
 
         router.push(`/catalogue?${queryParams.toString()}`);
       }}
-      className="cursor-pointer rounded-sm border-2 border-[#734DFF] bg-[#FFFFFF] text-black shadow-lg transition duration-150 ease-in-out hover:bg-[#EFEAFF] dark:border-[#36266D] dark:bg-[#171720] dark:text-white hover:dark:bg-[#262635]"
+      className="h-full cursor-pointer rounded-sm border-2 border-[#734DFF] bg-[#FFFFFF] text-black shadow-lg transition duration-150 ease-in-out hover:bg-[#EFEAFF] dark:border-[#36266D] dark:bg-[#171720] dark:text-white hover:dark:bg-[#262635]"
     >
       {/* Course Code */}
       <div className="border-b-2 border-[#453D60] p-2">
-        <h3 className="vipnabd inline-block rounded-t-lg px-2 py-1 text-lg tracking-widest">
+        <h3 className="vipnabd inline-block rounded-t-lg px-2 py-1 text-base md:text-lg md:tracking-widest">
           {courseCode} {/* Replace with dynamic code if needed */}
         </h3>
       </div>
 
       {/* Subject Name */}
       <div className="flex flex-col justify-between p-4">
-        <h2 className="mt-2 text-xl font-bold">{courseName}</h2>
+        <h2 className="mt-2 text-base font-bold md:text-xl">{courseName}</h2>
         {/* Slot Buttons */}
         <div className="mt-4 flex gap-2">
           {slots?.map((slotValue, index) => capsule(slotValue))}