/home/smartbloks/.trash/extendify/src/Library/pages/layout/Layout.js
import { useRef, useEffect } from '@wordpress/element'
import { __ } from '@wordpress/i18n'
import { GridView } from '@library/pages/GridView'
import { Sidebar } from '@library/pages/Sidebar'
import { useTemplatesStore } from '@library/state/Templates'
import HasSidebar from './HasSidebar'
import { Toolbar } from './Toolbar'
export const Layout = ({ setOpen }) => {
const gridContainer = useRef()
const searchParams = useTemplatesStore((state) => state.searchParams)
useEffect(() => {
if (!gridContainer.current) return
gridContainer.current.scrollTop = 0
}, [searchParams])
return (
<div className="relative mx-auto flex h-full max-w-screen-4xl flex-col items-center">
<div className="w-full flex-grow overflow-hidden">
<button
onClick={() =>
document
.getElementById('extendify-templates')
.querySelector('button')
.focus()
}
className="extendify-skip-to-sr-link sr-only focus:not-sr-only focus:text-blue-500">
{__('Skip to templates', 'extendify')}
</button>
<div className="relative mx-auto h-full sm:flex">
<HasSidebar>
<Sidebar />
<div className="relative z-30 flex h-full flex-col">
<Toolbar
className="hidden h-12 w-full flex-shrink-0 px-6 sm:block md:px-8"
hideLibrary={() => setOpen(false)}
/>
<div
ref={gridContainer}
className="z-20 flex-grow overflow-y-auto px-6 md:px-8">
<GridView />
</div>
</div>
</HasSidebar>
</div>
</div>
</div>
)
}