Home Page Desktop Separated From Mobile

src/views/Home/Desktop/index.js

@@ -0,0 +1,42 @@
+import React, { useState, useEffect, useCallback } from "react";
+import ScrollContainer from "react-indiana-drag-scroll";
+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 { book, publicApi } from "../../../redux/actions";
+
+const DesktopHome = (
+
+
+) =>{
+
+    
+return (
+
+    <div className="flex flex-col items-center w-4/5 justify-center">
+        <Banners />
+    </div>    
+
+)
+
+}
+
+const mapStateToProps = (state) => ({
+    isDark: state.publicApi.isDark,
+    isMobile: state.publicApi.isMobile,
+    books: state.book.list,
+    grades: state.publicApi.grades,
+    gradeFilterBooks: state.book.gradeFilterBooks,
+    selectedGrade: state.book.selectedGrade,
+  });
+  
+  const mapDispatchToProps = {
+    getList: book.list,
+    gradeFilter: book.gradeFilter,
+    setHeaderOptions: publicApi.setHeaderOptions,
+  };
+  
+  export default connect(mapStateToProps, mapDispatchToProps)(DesktopHome);
+  

src/views/Home/index.js

@@ -1,25 +1,33 @@
 import React, { useEffect } from "react";
 import { connect } from "react-redux";
-import Landscape from "./Landscape";
+// import Landscape from "./Landscape";
+import DesktopHome from './Desktop';
 import Portrait from "./Portrait";
 import { publicApi } from "../../redux/actions";
 
-function Home({ setHeaderOptions, headerOptions }) {
+function Home({ setHeaderOptions, headerOptions, isMobile }) {
   useEffect(() => {
     setHeaderOptions(headerOptions);
   }, []);
   return (
     <>
-      <Portrait />
-      <Landscape />
+
+    {
+      isMobile ? <Portrait /> : <div className="flex justify-center"><DesktopHome /></div>
+    }
+      
+      {/* <Landscape /> */}
     </>
   );
 }
 
-const mapStateToProps = (state) => ({});
+const mapStateToProps = (state) => ({
+  isMobile: state.publicApi.isMobile,
+});
 
 const mapDispatchToProps = {
   setHeaderOptions: publicApi.setHeaderOptions,
+  
 };
 
 export default connect(mapStateToProps, mapDispatchToProps)(Home);