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.
 
 
 

88 lines
3.1 KiB

import React, { useState, useEffect } from "react";
import { connect } from "react-redux";
import { book} from '../../../../redux/actions'
import { Link } from "react-router-dom";
import Product from '../../../../components/Product';
import Button from "../../../../components/Button";
import ScrollContainer from "react-indiana-drag-scroll";
const Part2 = (
{ books,
getBooks,
grades}
) => {
console.log({books})
const [filter, setFilter] = useState({
search: "",
grade: "",
productsType: "کتاب",
});
useEffect(() => {
getBooks();
}, []);
return (
<div className="w-full my-6" style={{
height: '550px'
}}>
<div className="w-full flex justify-between items-center pr-10">
<div className="flex items-center text-4xl font-black text-blue52">
<div className="w-6 h-6 bg-blue-300 ml-4 rounded-full"></div>
<h1>
کتاب های جدید
</h1>
</div>
<div>
<Link to='/products'>
<Button
title="مشاهده لیست محصولات"
backgroundColor="bg-blue-100"
border={{
color: "#196EC055",
width: "0px",
}}
width="100%"
selectable={true}
color= "text-blueC0"
onClick={() => null}
radius={false}
twPaddings="py-4 px-12 rounded"
/>
</Link>
</div>
</div>
<ScrollContainer className="flex overflow-x-scroll py-4 pl-10">
{
books?.slice(15,24).map((product, index) => (
<Link to={"/products/" + product?.id}>
<Product
key={`prod_New${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'
hoverMode='blue'
big
starRate={Math.floor(Math.random() * 5) + 1}
/>
</Link>
))}
</ScrollContainer>
</div>
)
}
const mapStateToProps = (state) => ({
books: state.book.list,
isDark: state.publicApi.isDark,
});
export default connect(mapStateToProps, { getBooks: book.list })(Part2);