You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

68 lines
1.8 KiB

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);