From d538706580588b16d32e19cd2757ec4d4cfa6121 Mon Sep 17 00:00:00 2001
From: kojiadrianojr <iisparkplugiiog@yahoo.com>
Date: Mon, 27 Nov 2023 21:35:28 +0800
Subject: [PATCH] Change scroll to carousel

---
 .../components/Featured/Cards.tsx             | 53 ++++++++++++-------
 .../components/Featured/style.css             |  9 ++++
 2 files changed, 43 insertions(+), 19 deletions(-)

diff --git a/src/views/MarketplaceV2/components/Featured/Cards.tsx b/src/views/MarketplaceV2/components/Featured/Cards.tsx
index 8f20f32..fbf4a18 100644
--- a/src/views/MarketplaceV2/components/Featured/Cards.tsx
+++ b/src/views/MarketplaceV2/components/Featured/Cards.tsx
@@ -1,42 +1,57 @@
 import React from 'react'
-import { Grid } from '@mui/material'
+import Carousel from 'react-multi-carousel'
+import 'react-multi-carousel/lib/styles.css'
 import styled from 'styled-components'
 import Card from '../Card'
 import './style.css'
 
 const Cards = (props) => {
   const { items } = props
+
   return (
-    <Grid
-      className="scrollable-container"
-      container
-      wrap="nowrap"
-      mt={5}
-      pb={5}
-      columnSpacing={{ xs: 2 }}
-      sx={{
-        overflowX: 'scroll',
-        overflowY: 'hidden',
-        overflow: 'auto',
-      }}
+    <Carousel
+      responsive={responsive}
+      infinite
+      showDots
+      autoPlay
+      removeArrowOnDeviceType={['tablet', 'mobile']}
+      containerClass="carousel-container"
+      dotListClass="custom-dot-list-style"
     >
       {items.map((item, ind) => {
         const id = ind + 1
         return (
-          <Grid key={id} item alignItems="center" xs={12}>
-            <StyledDiv>
-              <Card {...item} />
-            </StyledDiv>
-          </Grid>
+          <StyledDiv>
+            <Card {...item} />
+          </StyledDiv>
         )
       })}
-    </Grid>
+    </Carousel>
   )
 }
+const responsive = {
+  desktop: {
+    breakpoint: { max: 3000, min: 1024 },
+    items: 3,
+    slidesToSlide: 3, // optional, default to 1.
+  },
+  tablet: {
+    breakpoint: { max: 1024, min: 464 },
+    items: 2,
+    slidesToSlide: 2, // optional, default to 1.
+  },
+  mobile: {
+    breakpoint: { max: 464, min: 0 },
+    items: 1,
+    slidesToSlide: 1, // optional, default to 1.
+  },
+}
 
 export default Cards
 
 const StyledDiv = styled.div`
+  margin: 5vh 0px;
+  padding: 2vh;
   min-width: 220px;
   ${({ theme }) => `
     ${theme.mediaQueries.xl} {
diff --git a/src/views/MarketplaceV2/components/Featured/style.css b/src/views/MarketplaceV2/components/Featured/style.css
index 855cde6..eaa810c 100644
--- a/src/views/MarketplaceV2/components/Featured/style.css
+++ b/src/views/MarketplaceV2/components/Featured/style.css
@@ -12,3 +12,12 @@
     width: 24px;
   }
 }
+
+.custom-dot-list-style .react-multi-carousel-dot button {
+  background-color: #fff;
+  border: 1px solid #3898b8;
+}
+
+.custom-dot-list-style .react-multi-carousel-dot--active button {
+  background-color: #4bdefd;
+}
\ No newline at end of file