Reza_ashrafi
3 years ago
parent
34cc930fb4
commit
adc8846aa3
15 changed files with 298 additions and 292 deletions
@ -1,84 +0,0 @@ |
|||||||
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); |
|
||||||
@ -0,0 +1,78 @@ |
|||||||
|
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 { 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 "./index.css"; |
||||||
|
|
||||||
|
const SalesContainer = ({ books }) => { |
||||||
|
const [filter, setFilter] = useState({ |
||||||
|
search: "", |
||||||
|
grade: "", |
||||||
|
productsType: "کتاب", |
||||||
|
}); |
||||||
|
return ( |
||||||
|
<div className="w-full my-10"> |
||||||
|
<div className="w-full py-10 pl-2 bg-white flex justify-between items-center gap-3"> |
||||||
|
<div className="flex flex-row items-center pl-4"> |
||||||
|
{/* <div className="w-6 h-6 bg-blue-300 ml-4 rounded-full"></div> */} |
||||||
|
<div className="text-3xl leading-normal"> |
||||||
|
<h3 className=" bg-blueC0 text-white text-center"> دوشنبه </h3> |
||||||
|
<h3 |
||||||
|
className="mr-4 text-center" |
||||||
|
style={{ background: "#EFFF00" }} |
||||||
|
> |
||||||
|
{" "} |
||||||
|
کتاااابی{" "} |
||||||
|
</h3> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div className="flex items-center"> |
||||||
|
<p className="text-md flex">بیش از ۵۰ کتاب تخفیف خورده </p> |
||||||
|
<div className="w-6 h-6 bg-blue-300 mr-4 rounded-full"></div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<span className="flex-1 h-0.5 bg-gray-200 mr-10"></span> |
||||||
|
</div> |
||||||
|
{books.length > 0 && ( |
||||||
|
<div className="relative w-full" style={{ direction: "ltr" }}> |
||||||
|
<Carousel |
||||||
|
show={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-5" |
||||||
|
src={arrow} |
||||||
|
alt="" |
||||||
|
// onClick={(e) => e.stopPropagation()}
|
||||||
|
/> |
||||||
|
} |
||||||
|
leftArrow={ |
||||||
|
<img |
||||||
|
className="absolute top-1/2 transform -translate-y-1/2 -translate-x-5 cursor-pointer -rotate-180 p-5" |
||||||
|
src={arrow} |
||||||
|
alt="" |
||||||
|
// onClick={(e) => e.stopPropagation()}
|
||||||
|
/> |
||||||
|
} |
||||||
|
> |
||||||
|
{books.map((product, index) => ( |
||||||
|
<Product key={index} product={product} /> |
||||||
|
))} |
||||||
|
</Carousel> |
||||||
|
</div> |
||||||
|
)} |
||||||
|
</div> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
const mapStateToProps = (state) => ({ |
||||||
|
isDark: state.publicApi.isDark, |
||||||
|
}); |
||||||
|
export default connect(mapStateToProps, { getList: book.list })(SalesContainer); |
||||||
Loading…
Reference in new issue