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.
 
 
 

80 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 flex-row 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">
{" "}
دوشنبه{" "}
</h3>
<h3
className="mr-4 text-center font-semibold px-2 transform -translate-x-4 text-7xl"
style={{ background: "#EFFF00" }}
>
{" "}
کتاااابی{" "}
</h3>
</div>
</div>
<div className="flex items-center">
<p className="text-md flex text-lg font-bold">
بیش از ۵۰ کتاب تخفیف خورده&nbsp;
</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);