gautam-in · abhishekmehta2210 · Apr 17, 2023
diff --git a/Components/Carousel/Carousel.js b/Components/Carousel/Carousel.js
@@ -0,0 +1,92 @@
+import Image from "next/image";
+import React, { useState } from "react";
+import styles from "./Carousel.module.scss";
+
+
+export default function Carousel(props) {
+
+  const [current, setCurrent] = useState(1);
+  const [touchStart, setTouchStart] = useState(0);
+  const [touchEnd, setTouchEnd] = useState(0);
+  const carousallength=props.caraousalData && props.caraousalData.length?props.caraousalData.length:0;
+  const handleSlide = (slideOrder) => {
+    setCurrent(slideOrder);
+  };
+
+  const handleTouchStart = (e) => {
+    setTouchStart(e.targetTouches[0].clientX);
+    setTouchEnd(0);
+  };
+
+  const handleTouchMove = (e) => {
+    setTouchEnd(e.targetTouches[0].clientX);
+  };
+
+  const handleTouchEnd = () => {
+    if (touchEnd && touchStart - touchEnd > 15 && current!==carousallength) {
+      handleSlide(current + 1);
+    }
+
+    if (touchEnd && touchStart - touchEnd < -15 && current!==1) {
+      handleSlide(current - 1);
+    }
+  };
+
+  return (
+    <section className={styles["carousel"]}>
+    <div className={styles["carousel__container"]} >
+
+    {props.caraousalData &&props.caraousalData.map((item)=>{
+      return (
+          <div className={`${styles["carousel__container__slide"]} ${current===item.order?styles["active"]:""}`}  
+          key={item.id} style={current===item.order?{display:"block"}:{display:"none"}}
+          onTouchStart={handleTouchStart}
+            onTouchMove={handleTouchMove}
+            onTouchEnd={handleTouchEnd}>
+
+          <Image src={item.bannerImageUrl} className={`${styles["carousel__container__slide__image"]} `} fill 
+          priority={current===item.order?true:false}
+          alt={item.bannerImageAlt}
+          sizes="(max-width: 768px) 100vw,
+                (max-width: 1200px) 60vw,
+                100vw"
+
+         />
+
+        </div>
+      )
+    })}
+      <button className={styles["carousel__left-button"]} onClick={()=>{handleSlide(current-1)}} disabled={current===1?true:false} aria-label={"Move to Preivius Image"} aria-disabled={current===1?"true":"false"}>PREV</button>
+      <button className={styles["carousel__right-button"]} onClick={()=>{handleSlide(current+1)}} disabled={current===carousallength?true:false} aria-label={"Move to Next Image"} aria-disabled={current===carousallength?"true":"false"}>NEXT</button> 
+
+
+
+
+
+    </div>
+
+    <div className={styles["carousel__nav"]}>
+        {props.caraousalData && props.caraousalData.map((data) => (
+          <button
+            key={data.id}
+
+            onClick={() => handleSlide(data.order)}
+            aria-label={data.bannerImageAlt}
+            className={styles["carousel__nav__dot-button"]}
+          ><div className={
+            data.order === current
+              ? `${styles["carousel__nav__dots"]} ${styles["dots-active"]}`
+              : `${styles["carousel__nav__dots"]}`
+          }></div></button>
+        ))}
+      </div>
+
+
+
+
+
+
+</section>
+
+
+  )}
diff --git a/Components/Carousel/Carousel.module.scss b/Components/Carousel/Carousel.module.scss
@@ -0,0 +1,133 @@
+@import "/styles/variables";
+
+@mixin carousel-button {
+  display: none;
+
+  @media screen and (min-width: $mobile-breakpoint) {
+    display: block;
+    position: absolute;
+    top: 50%;
+    text-transform: uppercase;
+    z-index: 99;
+    background-color: rgba(0, 0, 0, 0.8);
+    color: $button-text-color;
+    border: 0;
+    font-size: $small-font-size;
+    padding: 0.4rem;
+    cursor: pointer;
+    transform: translateY(-50%);
+
+    &:hover {
+      background-color: rgba(0, 0, 0, 1);
+    }
+    &:disabled {
+      background-color: rgba(0, 0, 0, 0.2);
+    }
+  }
+}
+
+.carousel {
+  margin-top: 1rem;
+  position: relative;
+  box-shadow: 0px 30px 20px -30px rgba(161, 159, 159, 1);
+
+  &__container {
+    display: flex;
+    align-items: center;
+    height: 25vw;
+    position: relative;
+
+    @media screen and (min-width: $mobile-breakpoint) {
+      height: 12rem;
+    }
+
+    @media screen and (min-width: $tablet-breakpoint) {
+      height: 16rem;
+    }
+
+    &__slide {
+      opacity: 0;
+      transition: 1s ease;
+      transform: scale(0.98);
+      height: 100%;
+      width: 100%;
+      position: absolute;
+      &__image {
+        object-fit: fill;
+        max-width: 100%;
+        max-height: 100%;
+        width: 100%;
+      }
+    }
+  }
+
+  &__left-button {
+    @include carousel-button();
+    left: 0%;
+  }
+
+  &__right-button {
+    @include carousel-button();
+    right: 0%;
+  }
+
+  &__nav {
+    display: flex;
+    justify-content: center;
+    align-items: flex-end;
+    transform: translateY(0);
+    &__dot-button{
+      border: none;
+      background-color: #fff;
+      padding-top: 20px;
+      padding-bottom: 20px;
+      padding-left: 10px;
+      padding-right: 10px;
+    }
+
+    &__dots {
+      border: 0;
+      border-radius: 50%;
+      width: 0.5rem;
+      height: 0.5rem;
+      background-color: #9e9d9d;
+      margin: 0 0.5rem;
+
+
+      @media screen and (min-width: $mobile-breakpoint) {
+        margin: 0 1rem;
+        width: 0.4rem;
+        height: 0.4rem;
+      }
+
+      &:hover {
+        transform: scale(1.2);
+        transition: 0.2s ease;
+      }
+    }
+  }
+}
+
+.active {
+  opacity: 1;
+  transition: 1s;
+  transform: scale(1);
+}
+
+.dots-active {
+  background-color: #5c5c5c;
+  transform: scale(1.1);
+}
+.carousel__container__slide__image {
+  object-fit: fill;
+  max-width: 100%;
+  max-height: 100%;
+  width: 100%;
+}
+.image-wrapper {
+  width: 100%;
+  height: 100%;
+  max-width: 200px;
+  max-height: 150px;
+  object-fit: contain;
+}
diff --git a/Components/Cart/Cart.js b/Components/Cart/Cart.js
@@ -0,0 +1,66 @@
+import Image from "next/image";
+import React, { useContext, useEffect, useRef, useState } from "react";
+import useFocusTrap from "../../Hooks/useFocusTrap";
+import StoreContext from "../../Store/CommonStore";
+import styles from  "../Cart/Cart.module.scss";
+import CartContent from "../CartContent/CartContent";
+import EmptyCartContent from "../EmptyCartContent/EmptyCartContent";
+
+export default function Cart(props) {
+  const ctxVal=useContext(StoreContext)
+  const cartCount=ctxVal.count;
+  const [openCart,setOpenCart]=useState(false);
+  const ref = useRef(null);
+  const setElementRef = useFocusTrap(null);
+  const closeCart=()=>{
+    setOpenCart(false);
+  }
+  useEffect(() => {
+    if (openCart) {
+      setElementRef(ref);
+      document.body.style.overflow = "hidden";
+    }
+
+    return () => {
+      setElementRef(null);
+      document.body.style.overflow = "unset";
+    };
+  }, [openCart]);
+  return (
+    <>
+      <div
+        className={styles["cart-wrapper"]}
+        onClick={() => {
+          setOpenCart(true);
+        }}
+        tabIndex={0}
+        role="button"
+        aria-label="Open Cart"
+
+      >
+        <Image
+          src="/static/images/cart.svg"
+          className={styles["cart-wrapper__image"]}
+          alt={"View Cart"}
+          height={58}
+          width={40}
+        />
+        <p className={styles["cart-wrapper__text"]}>{cartCount} items</p>
+      </div>
+      {openCart?(
+         <div id="myModal" className={styles["modal"]} role={"dialog"} aria-modal="true" ref={ref}>
+
+
+         <div className={styles["modal-content"]}  >
+          {ctxVal.cartList.length>0?(
+            <CartContent {...props}  closeCart={closeCart}></CartContent>
+          ):(<EmptyCartContent closeCart={closeCart}></EmptyCartContent>)}
+
+         </div>
+
+         </div>
+      ):(<></>)}
+
+    </>
+  );
+}
diff --git a/Components/Cart/Cart.module.scss b/Components/Cart/Cart.module.scss
@@ -0,0 +1,73 @@
+@import "/styles/variables";
+
+.cart-wrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: $secondary-color;
+  padding: 0 10px;
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  cursor: pointer;
+
+  &__image {
+    width: 40px;
+  }
+
+  &__text {
+    color: black;
+    font-size: $text-font-size;
+    margin-right: 5px;
+  }
+}
+
+.modal {
+  display: block; 
+  position: fixed; 
+  z-index: 999; 
+  padding-top: 11%; 
+  left: 0;
+  top: 0;
+  width: 100vw; 
+  height: 100vh; 
+  overflow: auto; 
+  background-color: rgba(0,0,0,0.4); 
+  @media screen and (min-width: $breakpoint-smallLaptop) {
+
+    padding-top: 5%; 
+  }
+}
+
+.modal-content {
+  background-color: #ddd;
+  margin: auto;
+  border: 1px solid #888;
+  width: 100%;
+  height:90%;
+  position: absolute;
+  overflow: auto;
+  display: flex;
+    flex-direction: column;
+  @media screen and (min-width: $breakpoint-smallLaptop) {
+    width: 30%;
+    right: 20%;
+
+  }
+
+}
+
+
+.close {
+  color: #aaaaaa;
+  float: right;
+  font-size: 28px;
+  font-weight: bold;
+}
+
+.close:hover,
+.close:focus {
+  color: #000;
+  text-decoration: none;
+  cursor: pointer;
+}