From 1855b8030f38b53bc68d12d028732614c1d5d0f8 Mon Sep 17 00:00:00 2001
From: aelassas <akram.elassas@gmail.com>
Date: Tue, 8 Oct 2024 07:59:32 +0100
Subject: [PATCH] Update Carrousel.tsx

---
 .../src/app/(pages)/(public)/home/page.tsx    |  1 +
 frontend/src/components/Carrousel.tsx         | 11 ---------
 frontend/src/styles/carrousel.module.css      | 24 ++-----------------
 frontend/src/styles/category-list.module.css  |  8 -------
 .../src/styles/featured-products.module.css   |  8 -------
 5 files changed, 3 insertions(+), 49 deletions(-)

diff --git a/frontend/src/app/(pages)/(public)/home/page.tsx b/frontend/src/app/(pages)/(public)/home/page.tsx
index 3ded25d..d29c408 100644
--- a/frontend/src/app/(pages)/(public)/home/page.tsx
+++ b/frontend/src/app/(pages)/(public)/home/page.tsx
@@ -46,6 +46,7 @@ const Home = async () => {
           images={slides}
           autoplay
           autoplaySpeed={4 * 1000}
+          showNavigation
         />
       </div>
 
diff --git a/frontend/src/components/Carrousel.tsx b/frontend/src/components/Carrousel.tsx
index 1443475..ea8f566 100644
--- a/frontend/src/components/Carrousel.tsx
+++ b/frontend/src/components/Carrousel.tsx
@@ -3,9 +3,6 @@
 import React, { useRef } from 'react'
 import Slider from 'react-slick'
 import Image from 'next/image'
-import { Button } from '@mui/material'
-import { ArrowRight, ArrowLeft } from '@mui/icons-material'
-import { strings as commonStrings } from '@/lang/common'
 
 import styles from '@/styles/carrousel.module.css'
 
@@ -37,17 +34,9 @@ const Carrousel: React.FC<CarrouselProps> = ({
     appendDots: (dots: React.ReactNode) => (showNavigation || !autoplay) ? (
       <div>
         <ul style={{ margin: '0px', padding: '0px' }}>
-          <Button variant="text" className={`${styles.btnSlider} ${styles.btnSliderPrev}`} onClick={() => slider?.current?.slickPrev()}>
-            <ArrowLeft />
-            {commonStrings.BACK}
-          </Button>
           {' '}
           {dots}
           {' '}
-          <Button variant="text" className={`${styles.btnSlider} ${styles.btnSliderNext}`} onClick={() => slider?.current?.slickNext()}>
-            {commonStrings.NEXT}
-            <ArrowRight />
-          </Button>
         </ul>
       </div>
     ) : <></>,
diff --git a/frontend/src/styles/carrousel.module.css b/frontend/src/styles/carrousel.module.css
index f3b6bc8..67ef358 100644
--- a/frontend/src/styles/carrousel.module.css
+++ b/frontend/src/styles/carrousel.module.css
@@ -11,33 +11,13 @@ section.main h1.title {
 }
 
 section.main .slider {
-  height: 320px;
+  height: 310px;
   width: 1075px;
 }
 
-section.main .slickDots {
-  bottom: -60px;
-}
-
-section.main .slickDots li.slickActive button:before {
-  color: #1976D2;
-}
-
-section.main .btnSlider {
-  color: #000 !important;
-}
-
-section.main .btnSliderPrev {
-  margin-right: 60px;
-}
-
-section.main .btnSliderNext {
-  margin-left: 60px;
-}
-
 section.main article.image {
   height: 300px;
-  background-color: #fff;
+  background-color: #FAFAFA;
   margin: auto;
 }
 
diff --git a/frontend/src/styles/category-list.module.css b/frontend/src/styles/category-list.module.css
index 8cb5e91..8a4bbd3 100644
--- a/frontend/src/styles/category-list.module.css
+++ b/frontend/src/styles/category-list.module.css
@@ -16,14 +16,6 @@ section.main .slider {
   height: 320px;
 }
 
-section.main .slickDots {
-  bottom: -60px;
-}
-
-section.main .slickDots li.slickActive button:before {
-  color: #1976D2;
-}
-
 section.main .btnSlider {
   color: #000 !important;
 }
diff --git a/frontend/src/styles/featured-products.module.css b/frontend/src/styles/featured-products.module.css
index ac5d61d..e56c8c7 100644
--- a/frontend/src/styles/featured-products.module.css
+++ b/frontend/src/styles/featured-products.module.css
@@ -12,14 +12,6 @@ section.main .slider {
   height: 320px;
 }
 
-section.main .slickDots {
-  bottom: -60px;
-}
-
-section.main .slickDots li.slickActive button:before {
-  color: #1976D2;
-}
-
 section.main .btnSlider {
   color: #000 !important;
 }