patch:updated skeletons to fit dimensions aptly

Author: shikhar-sahay

src/components/PapersCarousel.tsx

@@ -46,10 +46,7 @@ function PapersCarousel({
 
     handleResize();
     window.addEventListener("resize", handleResize);
-
-    return () => {
-      window.removeEventListener("resize", handleResize);
-    };
+    return () => window.removeEventListener("resize", handleResize);
   }, []);
 
   const chunkedPapers = chunkArray(displayPapers, chunkSize);
@@ -90,12 +87,28 @@ function PapersCarousel({
           {carouselType === "users" ? "Your Papers" : "Upcoming Papers"}
         </p>
 
-        <div className="grid grid-cols-2 grid-rows-2 gap-4 md:grid-cols-4 lg:auto-rows-fr">
-          {Array.from({ length: 8 }).map((_, index) => (
-            <div key={index} className="space-y-4 p-2">
-              <Skeleton className="h-4 w-[70%]" />
-              <Skeleton className="h-4 w-[50%]" />
-              <Skeleton className="h-20 w-full rounded-lg" />
+        <div
+          className={`${
+            carouselType === "users"
+              ? "grid grid-cols-4"
+              : "grid grid-cols-2 grid-rows-2 md:grid-cols-4"
+          } gap-4 lg:auto-rows-fr`}
+        >
+          {Array.from({ length: chunkSize }).map((_, index) => (
+            <div
+              key={index}
+              className="h-full rounded-sm border-2 border-[#734DFF] bg-[#FFFFFF] shadow-lg dark:border-[#36266D] dark:bg-[#171720]"
+            >
+              <div className="border-b-2 border-[#453D60] p-2">
+                <Skeleton className="h-8 w-24 rounded-md" />
+              </div>
+              <div className="flex flex-col justify-between p-4">
+                <Skeleton className="mb-4 h-8 w-40 rounded-md" />
+                <div className="flex gap-2">
+                  <Skeleton className="h-7 w-16 rounded-full" />
+                  <Skeleton className="h-7 w-16 rounded-full" />
+                </div>
+              </div>
             </div>
           ))}
         </div>
@@ -111,12 +124,9 @@ function PapersCarousel({
         {carouselType === "users" ? "Your Papers" : "Upcoming Papers"}
       </p>
 
-      <div className="">
+      <div>
         <Carousel
-          opts={{
-            align: "start",
-            loop: true,
-          }}
+          opts={{ align: "start", loop: true }}
           plugins={plugins}
           className="w-full"
         >
@@ -125,23 +135,21 @@ function PapersCarousel({
             <CarouselNext className="relative" />
           </div>
           <CarouselContent>
-            {chunkedPapers.map((paperGroup, index) => {
-              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>
-              );
-            })}
+            {chunkedPapers.map((paperGroup, index) => (
+              <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>