update 5 files

src/components/Navbar/index.js

@@ -294,7 +294,7 @@ function Navbar({
           {!user ? (
             <Link
               to="/signup"
-              className="bg-blueC0 font-semibold text-white rounded-md px-4 py-3 text-sm mr-7 hover:bg-opacity-90 shadow-sm"
+              className="hidden lg:flex bg-blueC0 font-semibold text-white rounded-md px-4 py-3 text-sm mr-7 hover:bg-opacity-90 shadow-sm"
             >
               {window.t("ورود یا ثبت نام")}
             </Link>

src/views/Home/Landscape/Page1/Book/index.js

@@ -1,11 +1,10 @@
 import React from "react";
 import { Link } from "react-router-dom";
-// import _ from 'lodash';
 
 export default function Book({ book }) {
   return (
-    <Link to={`{/products/${book.name}}`} className="flex group relative cursor-pointer">
-      <img src={book.imageUrl} alt={book.name} className="lg:w-auto" />
+    <Link to={`{/products/${book?.id}}`} className="flex group relative cursor-pointer px-4">
+      <img src={"https://dnvn.ir/api/v1/file/" + book?.fileIds} alt={book.name} className="lg:w-auto" />
       <button className="py-1.5 px-5 border absolute border-white rounded-2xl group-hover:opacity-100 bottom-10 opacity-0 transition-all left-1/2 transform -translate-x-1/2 bg-blue90 bg-opacity-90 text-white text-sm">
         مشاهده و خرید
       </button>

src/views/Home/Portrait/Public/Header/index.js

@@ -1,20 +1,19 @@
 import React, { useState } from "react";
 import { Link } from "react-router-dom";
 import { Carousel } from "@trendyol-js/react-carousel";
+
+//components
+import Video from "../../../../../components/JolPlayer";
 import Book from "../../../Landscape/Page1/Book";
 import Lights from "../../../Landscape/Page1/Lights";
-import Video from "../../../../../components/JolPlayer";
+
+//assets
 import arrow from "../../../../../assets/icons/dropdown-blue.svg";
-import olum1Image from "../../../../../assets/images/olum-1.svg";
-import olum2Image from "../../../../../assets/images/olum-2.svg";
-import olum4Image from "../../../../../assets/images/olum-4.svg";
-import olum7Image from "../../../../../assets/images/olum-7.svg";
-import zist11Image from "../../../../../assets/images/zist-11.svg";
 import sheffImage from "../../../../../assets/images/sheff.svg";
 import flatFlower from "../../../../../assets/icons/flat-flower-white.svg";
 import jojoImage from "../../../../../assets/images/jojo.svg";
 
-function Header({ list }) {
+function Header({ bookList }) {
   const [show, setShow] = useState(2);
 
   return (
@@ -32,37 +31,41 @@ function Header({ list }) {
         className="absolute transform left-1/2 top-0 -translate-x-1/2 opacity-30"
       />
       <Lights degrees={[0, 0]} />
-      <div className="w-full flex flex-col lg:px-8 relative">
-        <div className="w-full relative z-10 px-4" style={{ direction: "ltr" }}>
-          <Carousel
-            show={show}
-            slide={1}
-            swiping={true}
-            swipeOn={0.05}
-            // useArrowKeys={true}
-            transition={0.5}
-            rightArrow={
-              <img
-                className="w-5 absolute top-1/2 transform -translate-y-1/2 cursor-pointer -rotate-90"
-                src={arrow}
-                alt=""
-              />
-            }
-            leftArrow={
-              <img
-                className="w-5 absolute top-1/2 transform -translate-y-1/2 -translate-x-5 cursor-pointer rotate-90"
-                src={arrow}
-                alt=""
-              />
-            }
-          >
-            {list.map((book, index) => (
-              <Book book={book} key={index} />
-            ))}
-          </Carousel>
+      {bookList?.length ? (
+        <div className="w-full flex flex-col lg:px-8 relative">
+          <div className="w-full relative z-10 px-4 ltr">
+            <Carousel
+              show={show}
+              slide={1}
+              key={bookList?.length}
+              swiping={true}
+              swipeOn={0.05}
+              // useArrowKeys={true}
+              transition={0.5}
+              rightArrow={
+                <img
+                  className="w-5 absolute top-1/2 transform -translate-y-1/2 cursor-pointer -rotate-90"
+                  src={arrow}
+                  alt=""
+                />
+              }
+              leftArrow={
+                <img
+                  className="w-5 absolute top-1/2 transform -translate-y-1/2 -translate-x-5 cursor-pointer rotate-90"
+                  src={arrow}
+                  alt=""
+                />
+              }
+            >
+              {bookList?.map((book, index) => (
+                <Book book={book} key={index} />
+              ))}
+            </Carousel>
+          </div>
+          <img src={sheffImage} alt="" className="w-full absolute bottom-0" />
         </div>
-        <img src={sheffImage} alt="" className="w-full absolute bottom-0" />
-      </div>
+      ) : null}
+
       <div className="w-full flex justify-center mt-5">
         <Link
           to="/products"
@@ -100,54 +103,15 @@ function Header({ list }) {
         </div>
       </div>
       <div className="w-full p-4 transform translate-y-1/3 relative">
-        <img
+        {/* <img
           src={jojoImage}
           alt=""
           className="w-full z-10 absolute top-0 left-0"
-        />
-        <Video />
+        /> */}
+        {/* <Video /> */}
       </div>
     </div>
   );
 }
 
 export default Header;
-
-Header.defaultProps = {
-  list: [
-    {
-      name: window.t("زیست یازدهم"),
-
-      imageUrl: zist11Image,
-    },
-    {
-      name: window.t("علوم دوم"),
-
-      imageUrl: olum2Image,
-    },
-    {
-      name: window.t("علوم اول"),
-
-      imageUrl: olum1Image,
-    },
-    {
-      name: window.t("علوم هفتم"),
-
-      imageUrl: olum7Image,
-    },
-    {
-      name: window.t("علوم چهارم"),
-
-      imageUrl: olum4Image,
-    },
-    {
-      name: window.t("علوم چهارم"),
-
-      imageUrl: olum4Image,
-    },
-    {
-      name: window.t("علوم چهارم"),
-      imageUrl: olum4Image,
-    },
-  ],
-};

src/views/Home/Portrait/Public/index.js

@@ -1,4 +1,7 @@
 import React from 'react';
+import {connect} from 'react-redux';
+
+//components
 import Header from './Header';
 import Features from './Features';
 import Responsive from './Responsive';
@@ -6,10 +9,10 @@ import Platforms from './Platforms';
 import App from './App';
 import GradiantText from './GradiantText';
 
-function Public() {
+function Public({bookList}) {
   return (
     <div className="w-full flex-1 px-4 pt-2 pb-24">
-      <Header />
+       <Header bookList={bookList} />
       <Features />
       <Responsive />
       <Platforms />
@@ -19,4 +22,8 @@ function Public() {
   )
 }
 
-export default Public;
+const mapStateToProps = (state) => ({
+  bookList: state.book.list
+})
+
+export default connect(mapStateToProps)(Public);