summaryrefslogtreecommitdiff
path: root/src/lib/product/components/ProductSlider.jsx
diff options
context:
space:
mode:
authorRafi Zadanly <zadanlyr@gmail.com>2023-02-22 11:03:34 +0700
committerRafi Zadanly <zadanlyr@gmail.com>2023-02-22 11:03:34 +0700
commitf66b12fd1d0b83af0d7230d7b1565fbe00afbe3c (patch)
tree253dcf854a3c92e09ca846e86a09e5b4c5d16be1 /src/lib/product/components/ProductSlider.jsx
parent3c559031623649a67825ff47f34512f0eb946861 (diff)
prettier
Diffstat (limited to 'src/lib/product/components/ProductSlider.jsx')
-rw-r--r--src/lib/product/components/ProductSlider.jsx59
1 files changed, 28 insertions, 31 deletions
diff --git a/src/lib/product/components/ProductSlider.jsx b/src/lib/product/components/ProductSlider.jsx
index 8d677547..aafd3cf1 100644
--- a/src/lib/product/components/ProductSlider.jsx
+++ b/src/lib/product/components/ProductSlider.jsx
@@ -1,51 +1,48 @@
-import { Swiper, SwiperSlide } from "swiper/react"
-import ProductCard from "./ProductCard"
-import "swiper/css"
-import Image from "@/core/components/elements/Image/Image"
-import Link from "@/core/components/elements/Link/Link"
-import { useState } from "react"
+import { Swiper, SwiperSlide } from 'swiper/react'
+import ProductCard from './ProductCard'
+import 'swiper/css'
+import Image from '@/core/components/elements/Image/Image'
+import Link from '@/core/components/elements/Link/Link'
+import { useState } from 'react'
-const bannerClassName = 'absolute rounded-r top-0 left-0 h-full max-w-[52%] idt-transition border border-gray_r-6'
+const bannerClassName =
+ 'absolute rounded-r top-0 left-0 h-full max-w-[52%] idt-transition border border-gray_r-6'
-const ProductSlider = ({
- products,
- simpleTitle = false,
- bannerMode = false
-}) => {
- const [ activeIndex, setActiveIndex ] = useState(0)
+const ProductSlider = ({ products, simpleTitle = false, bannerMode = false }) => {
+ const [activeIndex, setActiveIndex] = useState(0)
const swiperSliderFirstMove = (swiper) => {
setActiveIndex(swiper.activeIndex)
}
return (
<>
- { bannerMode && (
- <Image
- src={products.banner.image}
- alt={products.banner.name}
- className={`${bannerClassName} ${activeIndex > 0 ? 'opacity-0' : 'opacity-100'}`}
+ {bannerMode && (
+ <Image
+ src={products.banner.image}
+ alt={products.banner.name}
+ className={`${bannerClassName} ${activeIndex > 0 ? 'opacity-0' : 'opacity-100'}`}
/>
- ) }
- <Swiper
- freeMode={true}
- slidesPerView={2.2}
- spaceBetween={8}
- onSlideChange={swiperSliderFirstMove}
- prefix="product"
+ )}
+ <Swiper
+ freeMode={true}
+ slidesPerView={2.2}
+ spaceBetween={8}
+ onSlideChange={swiperSliderFirstMove}
+ prefix='product'
>
- { bannerMode && (
+ {bannerMode && (
<SwiperSlide>
- <Link href={products.banner.url} className="w-full h-full block"></Link>
+ <Link href={products.banner.url} className='w-full h-full block'></Link>
</SwiperSlide>
- ) }
- { products?.products?.map((product, index) => (
+ )}
+ {products?.products?.map((product, index) => (
<SwiperSlide key={index}>
<ProductCard product={product} simpleTitle={simpleTitle} />
</SwiperSlide>
- )) }
+ ))}
</Swiper>
</>
)
}
-export default ProductSlider \ No newline at end of file
+export default ProductSlider