balmet.com

Unnamed repository; edit this file 'description' to name the repository.
Log | Files | Refs

MainContent.js (2369B)

      1 import { useTemplatesStore } from '../state/Templates'
      2 import SidebarMain from '../layout/sidebars/SidebarMain'
      3 import TemplatesList from './TemplatesList'
      4 import TemplatesSingle from './TemplatesSingle'
      5 import HasSidebar from '../layout/HasSidebar'
      6 import TypeSelect from '../components/TypeSelect'
      7 import { __ } from '@wordpress/i18n'
      8 import SidebarSingle from '../layout/sidebars/SidebarSingle'
      9 import TaxonomyBreadcrumbs from '../components/TaxonomyBreadcrumbs'
     10 import Toolbar from '../layout/Toolbar'
     11 
     12 export default function MainContent({ setOpen }) {
     13     const activeTemplate = useTemplatesStore(state => state.activeTemplate)
     14     return <div className="bg-white h-full flex flex-col items-center relative shadow-xl max-w-screen-4xl mx-auto">
     15         <Toolbar
     16             className="w-full h-16 border-solid border-0 border-b border-gray-300 flex-shrink-0"
     17             hideLibrary={() => setOpen(false)}/>
     18         <div className="w-full flex-grow overflow-hidden">
     19             <a href="#extendify-templates" className="sr-only focus:not-sr-only focus:text-blue-500">
     20                 {__('Skip to content', 'extendify-sdk')}
     21             </a>
     22             <div className="sm:flex sm:space-x-12 relative bg-white mx-auto max-w-screen-4xl h-full">
     23                 {!!Object.keys(activeTemplate).length &&
     24                 <div className="absolute bg-white sm:flex inset-0 z-50 sm:space-x-12">
     25                     <HasSidebar>
     26                         <SidebarSingle template={activeTemplate}/>
     27                         <TemplatesSingle template={activeTemplate}/>
     28                     </HasSidebar>
     29                 </div>
     30                 }
     31                 <HasSidebar>
     32                     <SidebarMain/>
     33                     <>
     34                         <TypeSelect/>
     35                         {/* TODO: we may want to inject this as a portal so it can directly share state with SidebarMain.js */}
     36                         <TaxonomyBreadcrumbs/>
     37                         <div className="relative h-full z-30 bg-white">
     38                             <div className="absolute z-20 inset-0 lg:static h-screen overflow-y-auto pt-4 sm:pt-0 px-6 sm:pl-0 sm:pr-8 pb-40">
     39                                 <TemplatesList/>
     40                             </div>
     41                         </div>
     42                     </>
     43                 </HasSidebar>
     44             </div>
     45         </div>
     46     </div>
     47 }