feat: add isActive prop to gallery

pooriaset · May 18, 2024 · 86d5408 · 86d5408
1 parent 14db0fd
commit 86d5408
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 2 deletions.
diff --git 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
@@ -75,6 +75,7 @@ const ProductImages: FC<ProductImagesProps> = ({
               alt={item?.altText}
               src={item?.sourceUrl}
               key={item?.id}
+              isActive={item?.sourceUrl === selected.src}
             />
           );
         })}