You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
81 lines
2.7 KiB
81 lines
2.7 KiB
import React from "react"; |
|
import { connect } from "react-redux"; |
|
import { book } from "../../../../redux/actions"; |
|
import { Carousel } from "@trendyol-js/react-carousel"; |
|
|
|
//assets |
|
import arrow from "../../../../assets/icons/dropdown-blue.svg"; |
|
import Product from "../../../../components/Product"; |
|
import "./index.css"; |
|
|
|
//assets |
|
|
|
const SalesContainer = ({ books }) => { |
|
return ( |
|
<div className="w-full my-10"> |
|
<div className="w-full py-10 pl-2 bg-white flex justify-between items-center gap-3"> |
|
<div className="flex items-center pl-4"> |
|
{/* <div className="w-6 h-6 bg-blue-300 ml-4 rounded-full"></div> */} |
|
<div className="text-3xl leading-normal"> |
|
<h3 className=" bg-blueC0 text-white text-center bold text-7xl"> |
|
{" "} |
|
{window.t("دوشنبه")}{" "} |
|
</h3> |
|
<h3 |
|
className="mr-4 text-center font-semibold px-2 transform -translate-x-4 text-7xl" |
|
style={{ background: "#EFFF00" }} |
|
> |
|
{" "} |
|
{window.t("کتاااابی")}{" "} |
|
</h3> |
|
</div> |
|
</div> |
|
<div className="flex items-center"> |
|
<p className="text-md flex text-lg font-bold"> |
|
{window.t("بیش از ۵۰ کتاب تخفیف خورده")} |
|
|
|
</p> |
|
<div className="w-6 h-6 bg-greenDD mr-4 rounded-full"></div> |
|
</div> |
|
|
|
<span className="flex-1 h-0.5 bg-gray-200 mr-2"></span> |
|
</div> |
|
{books.length > 0 && ( |
|
<div className="relative w-full" style={{ direction: "ltr" }}> |
|
<Carousel |
|
show={Math.round(window.innerWidth / 350)} |
|
slide={2} |
|
swiping={true} |
|
useArrowKeys={true} |
|
transition={0.5} |
|
rightArrow={ |
|
<img |
|
className="absolute top-1/2 transform -rotate-90 -translate-y-1/2 cursor-pointer p-0" |
|
src={arrow} |
|
alt="" |
|
// onClick={(e) => e.stopPropagation()} |
|
/> |
|
} |
|
leftArrow={ |
|
<img |
|
className="absolute top-1/2 transform -translate-y-1/2 -translate-x-5 cursor-pointer rotate-90 p-2 -left-3" |
|
src={arrow} |
|
alt="" |
|
// onClick={(e) => e.stopPropagation()} |
|
/> |
|
} |
|
> |
|
{books.map((product, index) => ( |
|
<Product key={index} product={product} imageSize={3} /> |
|
))} |
|
</Carousel> |
|
</div> |
|
)} |
|
</div> |
|
); |
|
}; |
|
|
|
const mapStateToProps = (state) => ({ |
|
isDark: state.publicApi.isDark, |
|
}); |
|
export default connect(mapStateToProps, { getList: book.list })(SalesContainer);
|
|
|