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

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