import React, { useState, useEffect, useCallback } from "react"; import { connect } from "react-redux"; import Sidebar from "./layouts/Desktop/Sidebar"; import Main from "./layouts/Desktop/Main"; import Header from "./layouts/Mobile/Header"; import MobileMain from "./layouts/Mobile/Main"; import { book, publicApi } from "../../redux/actions"; //assets export const Products = ({ isDark, isMobile, books, grades, setHeaderOptions, headerOptions, desktopContentTransform, }) => { useEffect(() => { setHeaderOptions(headerOptions); }, []); return ( <> {/* Portrait */} <div className={`w-full flex flex-col bg-transparent relative ${ desktopContentTransform ? "lg:top-24 z-10" : "" }`} > {isMobile ? ( <div className="h-screen w-full overflow-hidden"> <Header /> <MobileMain books={books} grades={grades} /> </div> ) : ( <div className={`w-full flex gap-10 px-5 overflow-y-hidden mt-3 justify-center lg:pt-24 lg:mt-0`} > <div className="w-11/12 flex gap-5 justify-end"> <Sidebar /> <Main books={books} grades={grades} /> </div> </div> )} </div> </> ); }; const mapStateToProps = (state) => ({ isDark: state.publicApi.isDark, isMobile: state.publicApi.isMobile, books: state.book.list, grades: state.publicApi.grades, filterOptions: state.book.filterOptions, desktopContentTransform: state.publicApi.desktopContentTransform, }); const mapDispatchToProps = { gradeFilter: book.gradeFilter, setHeaderOptions: publicApi.setHeaderOptions, setFilterOptions: book.setFilterOptions, }; export default connect(mapStateToProps, mapDispatchToProps)(Products);