🎠 Carousels on Wanted and Volumes

src/client/components/Dashboard/VolumeGroups.tsx

@@ -4,6 +4,7 @@ import ellipsize from "ellipsize";
 import { Link, useNavigate } from "react-router-dom";
 import Card from "../shared/Carda";
 import Header from "../shared/Header";
+import useEmblaCarousel from "embla-carousel-react";
 
 export const VolumeGroups = (props): ReactElement => {
   // Till mongo gives us back the deduplicated results with the ObjectId
@@ -13,21 +14,33 @@ export const VolumeGroups = (props): ReactElement => {
     navigate(`/volumes/all`);
   };
 
+  // embla carousel
+  const [emblaRef, emblaApi] = useEmblaCarousel({
+    loop: false,
+    align: "start",
+    containScroll: "trimSnaps",
+    slidesToScroll: 1,
+  });
+
   return (
-    <section>
+    <div>
       <Header
         headerContent="Volumes"
-        subHeaderContent="Based on ComicVine Volume information"
+        subHeaderContent={<>Based on ComicVine Volume information</>}
         iconClassNames="fa-solid fa-binoculars mr-2"
         link={"/volumes"}
       />
-      <div className="grid grid-cols-5 gap-6 mt-3">
+      <div className="-mr-10 sm:-mr-17 lg:-mr-29 xl:-mr-36 2xl:-mr-42 mt-3">
+        <div className="overflow-hidden" ref={emblaRef}>
+          <div className="flex">
             {map(deduplicatedGroups, (data) => {
               return (
-            <div className="max-w-sm mx-auto" key={data._id}>
+                <div
+                  key={data._id}
+                  className="flex-[0_0_200px] min-w-0 sm:flex-[0_0_220px] md:flex-[0_0_240px] lg:flex-[0_0_260px] xl:flex-[0_0_280px] pr-[15px]"
+                >
                   <Card
                     orientation="vertical-2"
-                key={data._id}
                     imageUrl={data.volumes.image.small_url}
                     hasDetails
                   >
@@ -56,7 +69,9 @@ export const VolumeGroups = (props): ReactElement => {
               );
             })}
           </div>
-    </section>
+        </div>
+      </div>
+    </div>
   );
 };
 

src/client/components/Dashboard/WantedComicsList.tsx

@@ -6,6 +6,7 @@ import { isEmpty, isNil, isUndefined, map } from "lodash";
 import { detectIssueTypes } from "../../shared/utils/tradepaperback.utils";
 import { determineCoverFile } from "../../shared/utils/metadata.utils";
 import Header from "../shared/Header";
+import useEmblaCarousel from "embla-carousel-react";
 
 type WantedComicsListProps = {
   comics: any;
@@ -16,15 +17,25 @@ export const WantedComicsList = ({
 }: WantedComicsListProps): ReactElement => {
   const navigate = useNavigate();
 
+  // embla carousel
+  const [emblaRef, emblaApi] = useEmblaCarousel({
+    loop: false,
+    align: "start",
+    containScroll: "trimSnaps",
+    slidesToScroll: 1,
+  });
+
   return (
-    <>
+    <div>
       <Header
         headerContent="Wanted Comics"
-        subHeaderContent="Comics marked as wanted from various sources"
+        subHeaderContent={<>Comics marked as wanted from various sources</>}
         iconClassNames="fa-solid fa-binoculars mr-2"
         link={"/wanted"}
       />
-      <div className="grid grid-cols-5 gap-6 mt-3">
+      <div className="-mr-10 sm:-mr-17 lg:-mr-29 xl:-mr-36 2xl:-mr-42 mt-3">
+        <div className="overflow-hidden" ref={emblaRef}>
+          <div className="flex">
             {map(
                   comics,
                   ({
@@ -53,8 +64,11 @@ export const WantedComicsList = ({
                       </Link>
                     );
                     return (
-              <Card
+                      <div
                         key={_id}
+                        className="flex-[0_0_200px] min-w-0 sm:flex-[0_0_220px] md:flex-[0_0_240px] lg:flex-[0_0_260px] xl:flex-[0_0_280px] pr-[15px]"
+                      >
+                        <Card
                           orientation={"vertical-2"}
                           imageUrl={url}
                           hasDetails
@@ -114,10 +128,13 @@ export const WantedComicsList = ({
                             )}
                           </div>
                         </Card>
+                      </div>
                     );
                   },
                 )}
               </div>
-    </>
+            </div>
+          </div>
+        </div>
   );
 };