Home Page Desktop Sales Container Made

src/components/SalesContainer/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);

src/views/Home/Desktop/index.js

@@ -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">
+    <div className="flex flex-col items-center w-4/5 justify-center my-10">
-        <Banners
+        <Banners/>
+        <SalesContainer books={books} grades={grades}/>
         
-        />
     </div>    
 
 )