Merge pull request #408 from sankalp771/fix-arrow-navigation-399

fix: hide arrow buttons

Author: Abh1noob

src/components/PapersCarousel.tsx

@@ -63,66 +63,69 @@ function PapersCarousel() {
   const plugins = [Autoplay({ delay: 8000, stopOnInteraction: true })];
 
   return (
-    <div className="mt-3 px-4">
-      <p className="my-8 hidden text-center font-play text-lg font-semibold md:block">
-        Upcoming Exams
-      </p>
+      <div className="mt-3 px-4">
+        <p className="my-8 hidden text-center font-play text-lg font-semibold md:block">
+          Upcoming Exams
+        </p>
 
-      <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>
-          {isLoading ? (
-            <CarouselItem
-              className={`grid ${
-                chunkSize === 2 ? "grid-cols-1 grid-rows-2" : chunkSize === 4 ? "grid-cols-2 grid-rows-2" : "grid-cols-4"
-              } gap-4 lg:auto-rows-fr`}
-            >
-              <SkeletonPaperCard length={chunkSize} />
-            </CarouselItem>
-          ) : (
-            chunkedPapers.map((paperGroup, index) => {
-              const placeholdersNeeded = chunkSize - paperGroup.length;
+        <Carousel
+            opts={{ align: "start", loop: true }}
+            plugins={plugins}
+            className="w-full"
+        >
+          {/* Only show arrows when there are multiple chunks to scroll through */}
+          {chunkedPapers.length > 1 && displayPapers.length > chunkSize && (
+              <div className="relative mt-4 flex justify-end gap-4">
+                <CarouselPrevious className="relative" />
+                <CarouselNext className="relative" />
+              </div>
+          )}
 
-              return (
+          <CarouselContent>
+            {isLoading ? (
                 <CarouselItem
-                  key={`carousel-item-${index}`}
-                  className={`grid ${
-                    chunkSize === 2 ? "grid-cols-1 grid-rows-2" : chunkSize === 4 ? "grid-cols-2 grid-rows-2" : "grid-cols-4"
-                  } gap-4 lg:auto-rows-fr`}
+                    className={`grid ${
+                        chunkSize === 2 ? "grid-cols-1 grid-rows-2" : chunkSize === 4 ? "grid-cols-2 grid-rows-2" : "grid-cols-4"
+                    } gap-4 lg:auto-rows-fr`}
                 >
-                  {paperGroup.map((paper, subIndex) => (
-                    <div key={subIndex} className="h-full">
-                      <UpcomingPaper
-                        subject={paper.subject}
-                        slots={paper.slots}
-                      />
-                    </div>
-                  ))}
-
-                  {Array.from({ length: placeholdersNeeded }).map(
-                    (_, placeholderIndex) => (
-                      <div
-                        key={`placeholder-${placeholderIndex}`}
-                        className="invisible h-full"
-                      ></div>
-                    ),
-                  )}
+                  <SkeletonPaperCard length={chunkSize} />
                 </CarouselItem>
-              );
-            })
-          )}
-        </CarouselContent>
-      </Carousel>
-    </div>
+            ) : (
+                chunkedPapers.map((paperGroup, index) => {
+                  const placeholdersNeeded = chunkSize - paperGroup.length;
+
+                  return (
+                      <CarouselItem
+                          key={`carousel-item-${index}`}
+                          className={`grid ${
+                              chunkSize === 2 ? "grid-cols-1 grid-rows-2" : chunkSize === 4 ? "grid-cols-2 grid-rows-2" : "grid-cols-4"
+                          } gap-4 lg:auto-rows-fr`}
+                      >
+                        {paperGroup.map((paper, subIndex) => (
+                            <div key={subIndex} className="h-full">
+                              <UpcomingPaper
+                                  subject={paper.subject}
+                                  slots={paper.slots}
+                              />
+                            </div>
+                        ))}
+
+                        {Array.from({ length: placeholdersNeeded }).map(
+                            (_, placeholderIndex) => (
+                                <div
+                                    key={`placeholder-${placeholderIndex}`}
+                                    className="invisible h-full"
+                                ></div>
+                            ),
+                        )}
+                      </CarouselItem>
+                  );
+                })
+            )}
+          </CarouselContent>
+        </Carousel>
+      </div>
   );
 }
 
-export default PapersCarousel;
+export default PapersCarousel;