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.
 
 
 

84 lines
3.1 KiB

import React, {useState, useEffect} from "react";
import { connect } from "react-redux";
import { book, publicApi } from "../../redux/actions";
import ScrollContainer from "react-indiana-drag-scroll";
import { Link } from "react-router-dom";
import Product from "../Product";
import './index.css';
const SalesContainer = ({
list, getList,
grades
}) =>{
const [filter, setFilter] = useState({
search: "",
grade: "",
productsType: "کتاب",
});
useEffect(() => {
getList();
}, []);
return(
<div className="w-full my-10">
<div className="w-full border-b-2 border-solid border-blue-300 mb-24" style={{height: '100px'}}>
<div className="w-1/3 p-10 bg-white flex justify-between items-center" style={{
marginBottom:'-5px',
height:'200px'
}} onClick={() => console.log(list)}>
<div className="flex items-center ">
{/* <div className="w-6 h-6 bg-blue-300 ml-4 rounded-full"></div> */}
<h1 className="text-3xl leading-normal">
<h3 className=" bg-blueC0 text-white text-center"> دوشنبه </h3>
<h3 className="mr-4 w-24 text-center" style={{background: '#EFFF00'}}> کتاااابی </h3>
</h1>
</div>
<div className="flex items-center">
<p className="text-md">بیش از ۵۰ کتاب تخفیف خورده</p>
<div className="w-6 h-6 bg-blue-300 mr-4 rounded-full">
</div>
</div>
</div>
</div>
<ScrollContainer className="flex overflow-x-scroll border-t-0 py-4 pl-10" style={{height:'550px'}} >
{
list?.map((product, index) => (
<Link to={"/products/" + product?.id}>
<Product
key={`prod_takhfif${index}`}
productsType={filter.productsType}
product={product}
index={Number(index)}
productName={`کتاب ${product?.name}`}
productCat={`پایه ${grades[product?.gradeId]}`}
productPrice={100000}
productImg={"https://dnvn.ir/api/v1/file/" + product?.fileIds}
numberOfRegards={160}
productTitleColor='text-blue5F'
productCatTextColor='text-blueC0'
productHolderBorder=''
productHolderHoverBorder='shadow-md'
big
starRate={Math.floor(Math.random() * 5) + 1}
discountPricePercent
hoverMode='blue'
/>
</Link>
))}
</ScrollContainer>
</div>
)
}
const mapStateToProps = (state) => ({
list: state.book.list,
isDark: state.publicApi.isDark,
});
export default connect(mapStateToProps, { getList: book.list })(SalesContainer);