Merge pull request #25 from Adrienne14/feature/17-fix-horizontal-scroll

Feature: (#17): Change scroll to carousel
mgguild · Nov 29, 2023 · a1ccd92 · a1ccd92
2 parents e79dff5 + d538706
commit a1ccd92
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 19 deletions.
diff --git 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
@@ -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;
+}