From 86d5408b48f1b1e9a1f3f94ef05745398eefc580 Mon Sep 17 00:00:00 2001
From: Pooria Setayesh <pooriaset@yahoo.com>
Date: Sun, 19 May 2024 00:05:21 +0330
Subject: [PATCH] feat: add isActive prop to gallery

---
 .../products/[...id]/components/GalleryItem.tsx     | 13 +++++++++++--
 .../products/[...id]/components/ProductGallery.tsx  |  1 +
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/app/[locale]/(main)/products/[...id]/components/GalleryItem.tsx b/src/app/[locale]/(main)/products/[...id]/components/GalleryItem.tsx
index 048a5b4..311c8c7 100644
--- a/src/app/[locale]/(main)/products/[...id]/components/GalleryItem.tsx
+++ b/src/app/[locale]/(main)/products/[...id]/components/GalleryItem.tsx
@@ -6,14 +6,23 @@ export interface GalleryItemProps {
   onClick: () => void;
   alt: string | undefined | null;
   src: string | undefined | null;
+  isActive?: boolean;
 }
-const GalleryItem: FC<GalleryItemProps> = ({ onClick, alt, src }) => {
+const GalleryItem: FC<GalleryItemProps> = ({
+  onClick,
+  alt,
+  src,
+  isActive = false,
+}) => {
   return (
     <Box
       sx={{
         p: 0.5,
         border: '1px solid',
-        borderColor: (theme) => theme.palette.divider,
+        borderColor: isActive
+          ? (theme) => theme.palette.primary.main
+          : 'divider',
+        transition: 'all 200ms ease',
         borderRadius: 1,
         width: 72,
         height: 72,
diff --git a/src/app/[locale]/(main)/products/[...id]/components/ProductGallery.tsx b/src/app/[locale]/(main)/products/[...id]/components/ProductGallery.tsx
index 99caafd..2f0d494 100644
--- a/src/app/[locale]/(main)/products/[...id]/components/ProductGallery.tsx
+++ b/src/app/[locale]/(main)/products/[...id]/components/ProductGallery.tsx
@@ -75,6 +75,7 @@ const ProductImages: FC<ProductImagesProps> = ({
               alt={item?.altText}
               src={item?.sourceUrl}
               key={item?.id}
+              isActive={item?.sourceUrl === selected.src}
             />
           );
         })}