feat: complete product gallery

src/app/[locale]/(main)/page.tsx

@@ -15,10 +15,6 @@ import {
 import { bestSellingSortOption } from '@/static/sortOptions';
 import { Container, Grid } from '@mui/material';
 
-import 'swiper/css';
-import 'swiper/css/navigation';
-import 'swiper/css/pagination';
-
 const getSliders = async () => {
   const { data } = await getClient().query<GetHomePageSlidersQuery>({
     query: GET_HOMEPAGE_SLIDERS,

src/app/[locale]/(main)/products/[...id]/components/ProductGallery.tsx

@@ -0,0 +1,106 @@
+'use client';
+
+import Image from '@/components/common/Image';
+import { MoreHorizOutlined } from '@mui/icons-material';
+import { Box } from '@mui/material';
+import { FC, useState } from 'react';
+import { Product } from '../../types/common';
+import ProductGalleryDialog from './ProductGalleryDialog';
+
+export type ProductImages = Extract<
+  Product['galleryImages'],
+  { __typename?: 'ProductToMediaItemConnection' }
+>['nodes'];
+
+export interface ProductGalleryProps {
+  value?: ProductImages;
+}
+const ProductGallery: FC<ProductGalleryProps> = ({ value = [] }) => {
+  const [openDialog, setOpenDialog] = useState(false);
+
+  if (!value.length) {
+    return null;
+  }
+
+  const handleClickOnImage = () => {
+    setOpenDialog(true);
+  };
+  const handleClickOnClose = () => {
+    setOpenDialog(false);
+  };
+
+  return (
+    <>
+      <ProductGalleryDialog
+        value={value}
+        open={openDialog}
+        onClose={handleClickOnClose}
+      />
+      <Box
+        sx={{
+          maxWidth: '100%',
+          display: 'flex',
+          gap: 1,
+          flexWrap: 'wrap',
+          overflow: 'hidden',
+          height: 72,
+        }}
+      >
+        {value?.map((item, index) => {
+          const isLast = value.length - 1 == index;
+          return (
+            <Box
+              key={index}
+              sx={{
+                p: 0.5,
+                border: '1px solid',
+                borderColor: (theme) => theme.palette.divider,
+                borderRadius: 1,
+                width: 72,
+                height: 72,
+                position: 'relative',
+              }}
+            >
+              <Image
+                onClick={handleClickOnImage}
+                draggable={false}
+                width={72}
+                height={72}
+                alt={item.altText}
+                src={item.sourceUrl}
+                style={{
+                  objectFit: 'contain',
+                  cursor: 'pointer',
+                  userSelect: 'none',
+                  maxWidth: '100%',
+                  maxHeight: '100%',
+                  ...(isLast
+                    ? {
+                        filter: 'blur(4px)',
+                        opacity: 0.5,
+                      }
+                    : {}),
+                }}
+              />
+              {isLast && (
+                <MoreHorizOutlined
+                  fontSize="large"
+                  color="disabled"
+                  sx={{
+                    pointerEvents: 'none',
+                    position: 'absolute',
+                    top: '50%',
+                    left: '50%',
+                    transform: 'translate(-50%,-50%)',
+                  }}
+                />
+              )}
+            </Box>
+          );
+        })}
+      </Box>
+    </>
+  );
+};
+
+export default ProductGallery;

src/app/[locale]/(main)/products/[...id]/components/ProductGalleryDialog.tsx

@@ -0,0 +1,71 @@
+import Dialog, { DialogProps } from '@/components/Dialog';
+import Image from '@/components/common/Image';
+import { useTheme } from '@mui/material';
+import { useTranslations } from 'next-intl';
+import { FC } from 'react';
+import { Navigation, Pagination } from 'swiper/modules';
+import { Swiper, SwiperSlide } from 'swiper/react';
+import { ProductImages } from './ProductGallery';
+
+export interface ProductGalleryDialogProps extends DialogProps {
+  value: ProductImages;
+}
+const ProductGalleryDialog: FC<ProductGalleryDialogProps> = ({
+  value,
+  ...props
+}) => {
+  const t = useTranslations();
+  const theme = useTheme();
+  return (
+    <Dialog
+      maxWidth={'lg'}
+      title={t('pages.product.galleryDialogTitle')}
+      {...props}
+    >
+      <Swiper
+        dir={theme.direction}
+        autoplay={{
+          delay: 3000,
+          stopOnLastSlide: false,
+        }}
+        loop={true}
+        navigation={true}
+        modules={[Pagination, Navigation]}
+        slidesPerView={1}
+        pagination={{
+          clickable: true,
+        }}
+        style={{
+          borderRadius: 16,
+        }}
+      >
+        {value?.map((item) => {
+          return (
+            <SwiperSlide
+              key={item.altText}
+              style={{
+                height: 'auto',
+                boxSizing: 'border-box',
+                textAlign: 'center',
+              }}
+            >
+              <Image
+                priority
+                width={600}
+                height={600}
+                src={item.sourceUrl}
+                alt={item.altText}
+                style={{
+                  maxWidth: '100%',
+                  maxHeight: '100%',
+                }}
+              />
+            </SwiperSlide>
+          );
+        })}
+      </Swiper>
+    </Dialog>
+  );
+};
+
+export default ProductGalleryDialog;

src/app/[locale]/(main)/products/[...id]/components/ProductImage.tsx

@@ -0,0 +1,24 @@
+import Image from '@/components/common/Image';
+import { FC } from 'react';
+import { Product } from '../../types/common';
+
+export interface ProductImageProps {
+  value?: Product['image'];
+}
+const ProductImage: FC<ProductImageProps> = ({ value }) => {
+  return (
+    <Image
+      width={500}
+      height={500}
+      src={value?.sourceUrl}
+      alt={value?.altText}
+      draggable={false}
+      style={{
+        userSelect: 'none',
+        width: '100%',
+      }}
+    />
+  );
+};
+
+export default ProductImage;

src/app/[locale]/(main)/products/[...id]/components/SizeSelector.tsx

@@ -2,15 +2,12 @@
 
 import { VariantSelector } from '@/components/VariantSelector';
 import { VariantSelectorProps } from '@/components/VariantSelector/VariantSelector';
-import { GetSingleProductQuery } from '@/graphql/types/graphql';
 import { useTranslations } from 'next-intl';
-import React, { FC, useMemo } from 'react';
+import { FC, useMemo } from 'react';
+import { Product } from '../../types/common';
 
 export interface SizeSelectorProps {
-  items: Extract<
-    NonNullable<GetSingleProductQuery['product']>,
-    { __typename?: 'VariableProduct' }
-  >['variations'];
+  items: Extract<Product, { __typename?: 'VariableProduct' }>['variations'];
 }
 
 const SizeSelector: FC<SizeSelectorProps> = ({ items }) => {

src/app/[locale]/(main)/products/[...id]/page.tsx

@@ -2,7 +2,6 @@ import { FC } from 'react';
 
 import Breadcrumbs from '@/components/Breadcrumbs/Breadcrumbs';
 import { BuyBox } from '@/components/BuyBox';
-import { ProductImages } from '@/components/ProductImages';
 import { getClient } from '@/graphql/clients/serverSideClient';
 import { GET_SINGLE_VARIABLE_PRODUCT_QUERY } from '@/graphql/queries/products';
 import { GetSingleProductQuery } from '@/graphql/types/graphql';
@@ -14,9 +13,10 @@ import {
   Grid,
   Typography,
 } from '@mui/material';
-import { grey } from '@mui/material/colors';
 import type { Metadata } from 'next';
 import SizeSelector from './components/SizeSelector';
+import ProductImage from './components/ProductImage';
+import ProductGallery from './components/ProductGallery';
 
 type PageProps = {
   params: { id: string };
@@ -65,7 +65,14 @@ const Page: FC<PageProps> = async ({ params: { id } }) => {
     <Container maxWidth="xl" sx={{ mt: 3 }}>
       <Grid container spacing={2}>
         <Grid item md={4} xs={12}>
-          <ProductImages />
+          <Grid container spacing={2}>
+            <Grid item xs={12}>
+              <ProductImage value={product.image} />
+            </Grid>
+            <Grid item xs={12}>
+              <ProductGallery value={product?.galleryImages?.nodes} />
+            </Grid>
+          </Grid>
         </Grid>
         <Grid item md={5} xs={12}>
           <Breadcrumbs items={breadcrumbItems} />
@@ -77,7 +84,7 @@ const Page: FC<PageProps> = async ({ params: { id } }) => {
               fontSize: '1rem',
             }}
           >
-            {title}
+            {product?.title}
           </Typography>
           <Divider />
           <Grid
@@ -94,12 +101,8 @@ const Page: FC<PageProps> = async ({ params: { id } }) => {
           </Grid>
         </Grid>
         <Grid item md={3} xs={12}>
-          <Card>
-            <CardContent
-              sx={{
-                backgroundColor: grey[100],
-              }}
-            >
+          <Card variant="outlined">
+            <CardContent>
               <BuyBox />
             </CardContent>
           </Card>

src/app/[locale]/(main)/products/types/common.ts

@@ -0,0 +1,3 @@
+import { GetSingleProductQuery } from '@/graphql/types/graphql';
+
+export type Product = NonNullable<GetSingleProductQuery['product']>;

src/app/[locale]/layout.tsx

@@ -18,6 +18,10 @@ import { getClient } from '@/graphql/clients/serverSideClient';
 import { GET_GENERAL_SETTINGS } from '@/graphql/queries/general';
 import { GetGeneralSettingsQuery } from '@/graphql/types/graphql';
 
+import 'swiper/css';
+import 'swiper/css/navigation';
+import 'swiper/css/pagination';
+
 export type LocaleLayoutParams = { params: { locale: Locale } };
 
 export async function generateMetadata(): Promise<Metadata> {

src/components/BuyBox/BuyBox.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { useAppContext } from '@/hooks/useAppContext';
 import {
   AccountBalanceWalletOutlined,
   LocalShippingOutlined,
@@ -9,12 +10,10 @@ import List from '@mui/material/List';
 import ListItem from '@mui/material/ListItem';
 import ListItemIcon from '@mui/material/ListItemIcon';
 import ListItemText from '@mui/material/ListItemText';
-import { grey } from '@mui/material/colors';
+import { useTranslations } from 'next-intl';
 import DiscountPercentage from '../common/DiscountPercentage';
 import OldPrice from '../common/OldPrice';
 import PriceLabel from '../common/PriceLabel';
-import { useAppContext } from '@/hooks/useAppContext';
-import { useTranslations } from 'next-intl';
 
 const listItems = [
   {
@@ -59,7 +58,6 @@ const BuyBox = () => {
                 <ListItemText
                   primary={item.text}
                   primaryTypographyProps={{
-                    color: grey[700],
                     fontSize: (theme) => theme.typography.caption.fontSize,
                   }}
                 />

src/components/BuyBox/index.ts

@@ -1 +1 @@
-export { default as BuyBox } from "./BuyBox";
+export { default as BuyBox } from './BuyBox';

src/components/ColumnFilters/ColumnFilters.tsx

@@ -48,6 +48,7 @@ const ColumnFilters: FC<ColumnFiltersProps> = () => {
 
   return (
     <Card
+      variant="outlined"
       sx={{
         position: 'sticky',
         top: 130,