From 9225b3c7279a8cc6b7d009b970e3700403133651 Mon Sep 17 00:00:00 2001
From: David Ball <david@daball.me>
Date: Tue, 16 Jul 2024 01:22:19 -0400
Subject: [PATCH] Added SwiperJS to product card and improved SwiperJS design
 elements.

---
 src/components/CarouselSwiper.tsx  | 11 +++++-
 src/components/ProductCard.astro   |  4 ++-
 src/components/carousel-swiper.css | 56 ++++++++++++++++++++++++++++--
 src/layouts/Layout.astro           | 30 +++++++++++++++-
 4 files changed, 95 insertions(+), 6 deletions(-)

diff --git a/src/components/CarouselSwiper.tsx b/src/components/CarouselSwiper.tsx
index b5a5574..d8b7aa9 100644
--- a/src/components/CarouselSwiper.tsx
+++ b/src/components/CarouselSwiper.tsx
@@ -19,7 +19,6 @@ export default function CarouselSwiper(props: Props) {
                     stopOnLastSlide: false,
                 }
             }
-            effect={'coverflow'}
             coverflowEffect={{
                 depth: 100,
                 rotate: 0,
@@ -28,6 +27,7 @@ export default function CarouselSwiper(props: Props) {
                 modifier: 1,
                 stretch: 50,
             }}
+            effect={'coverflow'}
             keyboard={{
                 enabled: true,
             }}
@@ -42,12 +42,17 @@ export default function CarouselSwiper(props: Props) {
             ]}
             navigation={{
                 enabled: true,
+                // nextEl: '.swiper-button-next',
+                // prevEl: '.swiper-button-prev',
             }}
             pagination={{
+                el: '.swiper-pagination',
                 clickable: true,
             }}
             scrollbar={{
+                el: '.swiper-scrollbar',
                 draggable: true,
+                hide: true,
                 snapOnRelease: true,
             }}
             spaceBetween={200}
@@ -55,6 +60,10 @@ export default function CarouselSwiper(props: Props) {
             {props.images?.map((image) => (
                 <SwiperSlide><img className={'carousel-img'} src={image.src} alt={image.alt} title={image.title} /><div className="overlay"></div></SwiperSlide>
             ))}
+            <div className="swiper-pagination"></div>
+            {/* <div className="swiper-button-prev"></div>
+            <div className="swiper-button-next"></div> */}
+            <div className="swiper-scrollbar"></div>
         </Swiper>
     );
 }
\ No newline at end of file
diff --git a/src/components/ProductCard.astro b/src/components/ProductCard.astro
index 8cb0325..3132a0d 100644
--- a/src/components/ProductCard.astro
+++ b/src/components/ProductCard.astro
@@ -1,5 +1,6 @@
 ---
 import { type Product } from '../data/products/product';
+import CarouselSwiper from './CarouselSwiper';
 import StarRating from './StarRating.astro';
 
 interface Props {
@@ -14,7 +15,8 @@ const { product } = Astro.props;
 		<h4 class="card-header">
 			{product?.name}
 		</h4>
-		{product?.amazonProductDetails?.imageUrls !== undefined && <img src={product!.amazonProductDetails?.imageUrls[0]} alt={product?.amazonProductDetails?.title} style="width: 100%;" />}
+		{product?.amazonProductDetails?.imageUrls !== undefined && product?.amazonProductDetails.imageUrls.length == 1 && <img src={product!.amazonProductDetails?.imageUrls[0]} alt={product?.amazonProductDetails?.title} style="width: 100%;" />}
+		{product?.amazonProductDetails?.imageUrls !== undefined && product?.amazonProductDetails.imageUrls.length > 1 && <CarouselSwiper client:load images={product?.amazonProductDetails.imageUrls.map((imageUrl) => { return { src: imageUrl }; })} /> }
 		<div class="card-body">
 			<StarRating value={product?.amazonProductDetails?.reviewRating||0} max={5} overlayColor="#23262d" /> {product?.amazonProductDetails?.reviewCount} Reviews
 			<h5 class="card-title">
diff --git a/src/components/carousel-swiper.css b/src/components/carousel-swiper.css
index 3c3447b..77627f6 100644
--- a/src/components/carousel-swiper.css
+++ b/src/components/carousel-swiper.css
@@ -1,6 +1,36 @@
+:root {
+}
+/* .swiper-scrollbar.swiper-scrollbar-horizontal {
+    bottom: 0;
+    height: 40px;
+}
+.swiper-scrollbar-drag {
+    background: none;
+}
+.swiper-scrollbar-drag:after {
+    content: "";
+    background: rgba(210, 20, 4, 0.5);
+    position: absolute;
+    top: 0;
+    left: 50%;
+    margin: 0 0 0 -20px;
+} */
+
+.swiper-scrollbar {
+    /* background: #23262D; */
+    /* width: 40px;
+    height: 40px;
+    border-radius: 50%; */
+    --swiper-scrollbar-bg-color: rgba(35, 38, 45, 0.5);
+    mix-blend-mode: hard-light;
+}
+.swiper-scrollbar-drag {
+    background: rgba(210, 20, 4, 1);
+}
+
 .carousel-swiper {
-    border-radius: 7px;;
-    --swiper-navigation-color: rgba(210, 20, 4, 0.5);
+    border-radius: 7px;
+    --swiper-navigation-color: rgba(225, 20, 4, 0.8);
     background-color: #fff;
     /* background-color: coral; */
 }
@@ -15,10 +45,30 @@
 
 .carousel-swiper .carousel-img {
     width: 100%;
+    object-fit: cover;
+    justify-items: center;
+    align-items: center;
+    vertical-align: middle;
 }
 
 .carousel-swiper .swiper-pagination-bullet {
-    background-color: rgba(210, 20, 4, 0.5);
+    /* background-color: rgba(210, 20, 4, 0.8); */
+    background-color: rgba(35, 38, 45, 0.8);
+    /* filter: invert(1); */
+    mix-blend-mode: hard-light;
+    height: 1.1em;
+    width: 1.1em;
+}
+
+.carousel-swiper .swiper-pagination-bullet.swiper-pagination-bullet-active {
+    background-color: rgba(225, 20, 4, 0.8);
+    mix-blend-mode: hard-light;
+    padding: 0.9em;
+    margin-bottom: -0.3em;
+}
+
+.carousel-swiper .swiper-button-next, .carousel-swiper .swiper-button-prev {
+    mix-blend-mode: hard-light;
 }
 
 /* .carousel-swiper .swiper-button-next {
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 21e86cc..5262d85 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -57,7 +57,35 @@ const gTag = config.GoogleAnalyticsGTag;
 	</body>
 </html>
 <style is:global>
-	a{color: rgb(210, 20, 4))}
+	/* Uncomment for Firefox: * {
+	scrollbar-width: thin;
+	scrollbar-color: #4C1314 #23262D;
+	} */
+	*::-webkit-scrollbar {
+	height: 10px;
+	width: 10px;
+	}
+	*::-webkit-scrollbar-track {
+	border-radius: 5px;
+	background-color: #23262D;
+	}
+	*::-webkit-scrollbar-track:hover {
+	background-color: #33363D;
+	}
+	*::-webkit-scrollbar-track:active {
+	background-color: #43464D;
+	}
+	*::-webkit-scrollbar-thumb {
+	border-radius: 8px;
+	background-color: #4C1314;
+	}
+	*::-webkit-scrollbar-thumb:hover {
+	background-color: #d21404;
+	}
+	*::-webkit-scrollbar-thumb:active {
+	background-color: #f21404;
+	}
+	a{color: #d21404)}
 	:root {
 		--accent: 210, 20, 4;
 		--accent-light: 255, 48, 8;