arrow added | 60

temp
mahdi andalib 2 years ago
parent 4c30be3abd
commit 4da68738bd
  1. 55
      src/views/Products/layouts/Desktop/Main.js

@ -210,10 +210,10 @@ export const Main = ({
))} ))}
</ul> </ul>
</div> </div>
<div className="flex flex-col w-full relative"> <div className="flex flex-col w-full relative">
{/* arrow */} {/* 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"> {/* <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"> <div className="cursor-pointer">
<img <img
src={dropdownIcon} src={dropdownIcon}
@ -221,9 +221,7 @@ export const Main = ({
className="w-5 transform -rotate-90 cursor-pointer" className="w-5 transform -rotate-90 cursor-pointer"
/> />
</div> </div>
{/* divider */}
<div className="w-0.5 h-6 bg-gray-200"></div> <div className="w-0.5 h-6 bg-gray-200"></div>
{/* left arrow */}
<div className="cursor-pointer"> <div className="cursor-pointer">
<img <img
src={dropdownIcon} src={dropdownIcon}
@ -231,7 +229,7 @@ export const Main = ({
className="w-5 transform rotate-90 cursor-pointer" className="w-5 transform rotate-90 cursor-pointer"
/> />
</div> </div>
</div> </div> */}
{/* carousel slider */} {/* carousel slider */}
{filterLoading && ( {filterLoading && (
<div <div
@ -241,20 +239,45 @@ export const Main = ({
<Loading size={4} color="bg-green-400" /> <Loading size={4} color="bg-green-400" />
</div> </div>
)} )}
<div> {books.length > 0 && (
{(filterOptions?.productType <div className="relative w-full" style={{ direction: "ltr" }}>
? filterOptions.productType === "دوره ویدئویی" <Carousel
: true) && ( show={Math.round(window.innerWidth / 666)}
<ScrollingCarousel slide={2}
rightArrow={<div>{">"}</div>} swiping={true}
leftArrow={<div>{"<"}</div>}
className="max-w-full"
useArrowKeys={true} useArrowKeys={true}
transition={0.5}
rightArrow={
<img
className="bg-gray-50 p-2 absolute top-0 transform -rotate-90 translate-y-0 translate-x-0 left-6 cursor-pointer"
src={dropdownIcon}
style={{
borderRight: "solid 2px #E5E7EB",
borderLeft: "solid 2px #E5E7EB",
borderBottom: "solid 2px #E5E7EB",
borderRadius: "4px",
}}
alt=""
/>
}
leftArrow={
<img
className="bg-gray-50 p-2 absolute top-0 transform rotate-90 translate-y-0 translate-x-0 left-0 cursor-pointer"
src={dropdownIcon}
style={{
borderRight: "solid 2px #E5E7EB",
borderLeft: "solid 2px #E5E7EB",
borderBottom: "solid 2px #E5E7EB",
borderRadius: "4px",
}}
alt=""
/>
}
> >
{Items(2)} {Items(2)}
</ScrollingCarousel> </Carousel>
)} </div>
</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"> <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)} {Items(1)}
</div> </div>

Loading…
Cancel
Save