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
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); |