Home Page Desktop Sales Container Made

temp
Pedram Keshavarzi 3 years ago
parent 0091aa4f7e
commit 0cd9175a83
  1. 0
      src/components/SalesContainer/index.css
  2. 81
      src/components/SalesContainer/index.js
  3. 12
      src/views/Home/Desktop/index.js

@ -0,0 +1,81 @@
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-gray-300">
<div className="w-1/3 p-10 bg-white flex justify-between items-center" style={{
marginBottom:'-5px'
}} 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-blue-700 text-white"> دوشنبه </h3>
<h3 className="mr-4 bg-yellow-300 pl-6"> کتاااابی </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-2 border-solid border-gray-300 border-t-0 py-4 px-10" style={{
// marginTop: '-5px'
}}>
{
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'
/>
</Link>
))}
</ScrollContainer>
</div>
)
}
const mapStateToProps = (state) => ({
list: state.book.list,
isDark: state.publicApi.isDark,
});
export default connect(mapStateToProps, { getList: book.list })(SalesContainer);

@ -4,21 +4,25 @@ import { connect } from 'react-redux';
import { Link } from "react-router-dom";
import filterIcon from '../../../assets/images/vuesax-linear-filter-tick.svg';
import Banners from "../../../components/Banners";
import SalesContainer from "../../../components/SalesContainer";
import { book, publicApi } from "../../../redux/actions";
const DesktopHome = (
{
books,
grades
}
) =>{
return (
<div className="flex flex-col items-center w-4/5 justify-center">
<Banners
<div className="flex flex-col items-center w-4/5 justify-center my-10">
<Banners/>
<SalesContainer books={books} grades={grades}/>
/>
</div>
)

Loading…
Cancel
Save