|
|
|
@ -1,7 +1,7 @@ |
|
|
|
|
import React, { useEffect, useState } from "react"; |
|
|
|
|
import { connect } from "react-redux"; |
|
|
|
|
import { Link } from "react-router-dom"; |
|
|
|
|
import { ScrollingCarousel } from "@trendyol-js/react-carousel"; |
|
|
|
|
import { ScrollingCarousel, Carousel } from "@trendyol-js/react-carousel"; |
|
|
|
|
|
|
|
|
|
import Product from "../../../../components/Product"; |
|
|
|
|
import VodProduct from "../../../../components/VodProduct"; |
|
|
|
@ -17,6 +17,7 @@ export const Main = ({ |
|
|
|
|
sortMethods, |
|
|
|
|
filterOptions, |
|
|
|
|
setFilterOptions, |
|
|
|
|
isMobile, |
|
|
|
|
}) => { |
|
|
|
|
const [filterLoading, setFilterLoading] = useState(false); |
|
|
|
|
|
|
|
|
@ -212,6 +213,7 @@ export const Main = ({ |
|
|
|
|
<div className="flex flex-col w-full relative"> |
|
|
|
|
{/* arrow */} |
|
|
|
|
<div className="w-fit self-end flex flex-row items-center justify-between gap-x-2 px-2 py-1 bg-gray-50 border border-solid border-gray-200 rounded-md50"> |
|
|
|
|
{/* right arrow */} |
|
|
|
|
<div className="cursor-pointer"> |
|
|
|
|
<img |
|
|
|
|
src={dropdownIcon} |
|
|
|
@ -221,6 +223,7 @@ export const Main = ({ |
|
|
|
|
</div> |
|
|
|
|
{/* divider */} |
|
|
|
|
<div className="w-0.5 h-6 bg-gray-200"></div> |
|
|
|
|
{/* left arrow */} |
|
|
|
|
<div className="cursor-pointer"> |
|
|
|
|
<img |
|
|
|
|
src={dropdownIcon} |
|
|
|
@ -238,14 +241,33 @@ export const Main = ({ |
|
|
|
|
<Loading size={4} color="bg-green-400" /> |
|
|
|
|
</div> |
|
|
|
|
)} |
|
|
|
|
<div> |
|
|
|
|
<div style={{ height: 180 }}> |
|
|
|
|
{(filterOptions?.productType |
|
|
|
|
? filterOptions.productType === "دوره ویدئویی" |
|
|
|
|
: true) && ( |
|
|
|
|
<ScrollingCarousel className="max-w-full"> |
|
|
|
|
{Items(2)} |
|
|
|
|
</ScrollingCarousel> |
|
|
|
|
)} |
|
|
|
|
: true) && |
|
|
|
|
(isMobile ? ( |
|
|
|
|
<ScrollingCarousel |
|
|
|
|
rightArrow={<div>{">"}</div>} |
|
|
|
|
leftArrow={<div>{"<"}</div>} |
|
|
|
|
className="max-w-full" |
|
|
|
|
useArrowKeys={true} |
|
|
|
|
> |
|
|
|
|
{Items(2)} |
|
|
|
|
</ScrollingCarousel> |
|
|
|
|
) : ( |
|
|
|
|
<Carousel |
|
|
|
|
show={4} |
|
|
|
|
slide={2} |
|
|
|
|
swiping={true} |
|
|
|
|
useArrowKeys={true} |
|
|
|
|
transition={0.5} |
|
|
|
|
className="max-w-full h-[180px] h-full" |
|
|
|
|
// useArrowKeys={true}
|
|
|
|
|
> |
|
|
|
|
{" "} |
|
|
|
|
{Items(2)} |
|
|
|
|
</Carousel> |
|
|
|
|
))} |
|
|
|
|
</div> |
|
|
|
|
<div className="w-full flex flex-row flex-wrap mt-0 border-t-2 border-solid border-gray-100 overflow-y-hidden gap-4 justify-evenly pt-3"> |
|
|
|
|
{Items(1)} |
|
|
|
|