Blame view

components/home/LetDiscover.js 5.41 KB
Ravindra Kanojiya committed
1 2
import Image from "next/image";
import React from "react";
Ravindra Kanojiya committed
3
import { fadeIn, zoomIn, slideFromLeft, slideFromRight } from "../animationvariants.js";
Ravindra Kanojiya committed
4
import { Button } from "react-bootstrap";
Ravindra Kanojiya committed
5 6 7 8 9 10 11 12 13

import { Swiper, SwiperSlide } from "swiper/react";

import { Navigation, Autoplay, Parallax } from "swiper/modules";
import { motion } from "framer-motion";
// Import Swiper styles
import "swiper/css";
import "swiper/css/pagination";
import "swiper/css/navigation";
14
import { cleanImage } from "../../services/imageHandling.js";
.  
jaymehta committed
15
import { useRouter } from "next/router.js";
16
const LetDiscover = ({ categories }) => {
.  
jaymehta committed
17
  const router = useRouter();
Ravindra Kanojiya committed
18 19 20 21 22 23
  return (
    <>
      <section className="let-discover-session">
        <div className="container">
          <div className="row">
            <div className="col-12">
Ravindra Kanojiya committed
24 25 26
              {/* <motion.div variants={slideFromRight(0.4)} initial={"hidden"} whileInView={"show"} viewport={{ once: false, amount: 0.2 }}>
                your text or div will come here
              </motion.div> */}
Ravindra Kanojiya committed
27
              <div className="head-btn">
Ravindra Kanojiya committed
28 29 30 31 32 33
                <motion.div variants={slideFromRight(0.4)} initial={"hidden"} whileInView={"show"} viewport={{ once: false, amount: 0.2 }}>
                  <div className="head01">
                    <div className="title">Lets </div>
                    <h2>Discover</h2>
                  </div>
                </motion.div>
Ravindra Kanojiya committed
34
                <div className="view-all-btn">
.  
jaymehta committed
35 36 37 38 39 40 41 42
                  <Button
                    onClick={() => {
                      router.push("/listing");
                    }}
                    variant="primary"
                  >
                    View All
                  </Button>
Ravindra Kanojiya committed
43 44 45 46 47 48
                </div>
              </div>
            </div>
          </div>
          <div className="row">
            <div className="col-12">
Ravindra Kanojiya committed
49 50 51
              <div className="let-discover-carousal position-relative">
                <Swiper
                  modules={[Autoplay, Navigation]}
52
                  slidesPerView={3}
Ravindra Kanojiya committed
53
                  spaceBetween= {10}
Ravindra Kanojiya committed
54 55 56 57 58 59 60 61 62 63 64 65 66 67 68
                  // autoplay={{
                  //     delay: 7000,
                  //     disableOnInteraction: false,
                  // }}
                  navigation={{
                    nextEl: ".discover-swiper-button-next",
                    prevEl: ".discover-swiper-button-prev"
                  }}
                  speed={1200}
                  breakpoints={{
                    640: {
                      slidesPerView: 3,
                      spaceBetween: 20
                    },
                    768: {
Ravindra Kanojiya committed
69
                      slidesPerView: 3,
Ravindra Kanojiya committed
70 71 72 73 74 75 76 77
                      spaceBetween: 20
                    },
                    1024: {
                      slidesPerView: 6,
                      spaceBetween: 20
                    }
                  }}
                  className="mySwiper01 mySwiper02"
Ravindra Kanojiya committed
78
                >
.  
jaymehta committed
79
                  {/* <SwiperSlide>
80 81 82 83 84 85 86 87
                    <motion.div variants={zoomIn("left", 0.3)} initial={"hidden"} whileInView={"show"} viewport={{ once: false, amount: 0.2 }}>
                      <a href="">
                        <span className="image-container">
                          <Image layout="fill" alt="" className="image img-fluid" src="/images/discover/03.png" />
                        </span>
                        <div className="title">ALL</div>
                      </a>
                    </motion.div>
.  
jaymehta committed
88
                  </SwiperSlide> */}
89 90
                  {categories?.data &&
                    categories.data.map((data, index) => {
Ravindra Kanojiya committed
91
                      return (
92 93
                        <SwiperSlide key={data?.id}>
                          <motion.div variants={zoomIn("left", 0.3)} initial={"hidden"} whileInView={"show"} viewport={{ once: false, amount: 0.2 }}>
.  
jaymehta committed
94 95 96 97 98
                            <a
                              onClick={() => {
                                router.push(`/listing?category=${data.id}`);
                              }}
                            >
99 100 101 102 103
                              <span className="image-container">
                                <Image layout="fill" alt="" className="image img-fluid" src={cleanImage(data?.attributes?.image?.data?.attributes)} />
                              </span>
                              <div className="title">{data?.attributes?.name}</div>
                            </a>
Ravindra Kanojiya committed
104 105
                          </motion.div>
                        </SwiperSlide>
Ravindra Kanojiya committed
106 107
                      );
                    })}
Ravindra Kanojiya committed
108 109 110 111 112 113 114 115 116 117 118 119 120 121 122
                </Swiper>
                <div className="swiper-nav">
                  <div className="navbutton d-flex justify-content-between ">
                    <button className="discover-swiper-button-prev arrow" aria-label="Prev">
                      <span className="image-container">
                        <Image layout="fill" alt="" className="image img-fluid" src="/images/icons/arrow-left.svg" />
                      </span>
                    </button>
                    <button className="discover-swiper-button-next arrow" aria-label="Next">
                      <span className="image-container">
                        <Image layout="fill" alt="" className="image img-fluid" src="/images/icons/arrow-right.svg" />
                      </span>
                    </button>
                  </div>
                </div>
Ravindra Kanojiya committed
123 124 125 126 127 128 129 130 131 132
              </div>
            </div>
          </div>
        </div>
      </section>
    </>
  );
};

export default LetDiscover;