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.
87 lines
2.6 KiB
87 lines
2.6 KiB
import React, { useState, useEffect } from "react"; |
|
import { connect } from "react-redux"; |
|
import { book } from "../../../../redux/actions"; |
|
import { Carousel } from "@trendyol-js/react-carousel"; |
|
import arrow from "../../../../assets/icons/slider-arrow.svg"; |
|
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, grades }) => { |
|
// console.log({ books }); |
|
const [filter, setFilter] = useState({ |
|
search: "", |
|
grade: "", |
|
productsType: "کتاب", |
|
}); |
|
return ( |
|
<div |
|
className="w-full my-6" |
|
style={ |
|
{ |
|
// height: "550px", |
|
} |
|
} |
|
> |
|
<div className="w-full flex justify-between items-center mb-4"> |
|
<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 className="text-2xl text-blue5F">کتاب های جدید</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> |
|
{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 -translate-y-1/2 cursor-pointer p-2" |
|
src={arrow} |
|
alt="" |
|
/> |
|
} |
|
leftArrow={ |
|
<img |
|
className="absolute top-1/2 transform -translate-y-1/2 -translate-x-5 cursor-pointer -rotate-180 p-2" |
|
src={arrow} |
|
alt="" |
|
/> |
|
} |
|
> |
|
{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, {})(Part2);
|
|
|