@loke/design-system/dist/layout/page-layout/index.js

A design system with individually importable components

var __create=Object.create;var{getPrototypeOf:__getProtoOf,defineProperty:__defProp,getOwnPropertyNames:__getOwnPropNames,getOwnPropertyDescriptor:__getOwnPropDesc}=Object,__hasOwnProp=Object.prototype.hasOwnProperty;function __accessProp(key){return this[key]}var __reExport=(target,mod,secondTarget)=>{var keys=__getOwnPropNames(mod);for(let key of keys)if(!__hasOwnProp.call(target,key)&&key!=="default")__defProp(target,key,{get:__accessProp.bind(mod,key),enumerable:!0});if(secondTarget){for(let key of keys)if(!__hasOwnProp.call(secondTarget,key)&&key!=="default")__defProp(secondTarget,key,{get:__accessProp.bind(mod,key),enumerable:!0});return secondTarget}},__toESMCache_node,__toESMCache_esm,__toESM=(mod,isNodeMode,target)=>{var canCache=mod!=null&&typeof mod==="object";if(canCache){var cache=isNodeMode?__toESMCache_node??=new WeakMap:__toESMCache_esm??=new WeakMap,cached=cache.get(mod);if(cached)return cached}target=mod!=null?__create(__getProtoOf(mod)):{};let to=isNodeMode||!mod||!mod.__esModule?__defProp(target,"default",{value:mod,enumerable:!0}):target;for(let key of __getOwnPropNames(mod))if(!__hasOwnProp.call(to,key))__defProp(to,key,{get:__accessProp.bind(mod,key),enumerable:!0});if(canCache)cache.set(mod,to);return to},__toCommonJS=(from)=>{var entry=(__moduleCache??=new WeakMap).get(from),desc;if(entry)return entry;if(entry=__defProp({},"__esModule",{value:!0}),from&&typeof from==="object"||typeof from==="function"){for(var key of __getOwnPropNames(from))if(!__hasOwnProp.call(entry,key))__defProp(entry,key,{get:__accessProp.bind(from,key),enumerable:!(desc=__getOwnPropDesc(from,key))||desc.enumerable})}return __moduleCache.set(from,entry),entry},__moduleCache;var __returnValue=(v)=>v;function __exportSetter(name,newValue){this[name]=__returnValue.bind(null,newValue)}var __export=(target,all)=>{for(var name in all)__defProp(target,name,{get:all[name],enumerable:!0,configurable:!0,set:__exportSetter.bind(all,name)})};var exports_page_layout={};__export(exports_page_layout,{PageLayoutSidebarProvider:()=>PageLayoutSidebarProvider,PageLayout:()=>PageLayout,HEADER_HEIGHT:()=>HEADER_HEIGHT});module.exports=__toCommonJS(exports_page_layout);var import_box=require("@loke/design-system/box"),import_heading=require("@loke/design-system/heading"),import_max_width_wrapper=require("@loke/design-system/max-width-wrapper"),import_spinner=require("@loke/design-system/spinner"),import_react=require("react"),jsx_runtime=require("react/jsx-runtime"),PageLayoutSidebarContext=import_react.createContext(null);function PageLayoutSidebarProvider({children,sidebar}){return jsx_runtime.jsx(PageLayoutSidebarContext.Provider,{value:sidebar,children})}var HEADER_HEIGHT="8rem",PageLayout=({children,header,loading,sidebar:sidebarProp})=>{let sidebarContext=import_react.useContext(PageLayoutSidebarContext),sidebar=sidebarProp??sidebarContext;return jsx_runtime.jsxs("div",{className:"flex h-screen max-h-screen w-full flex-col overflow-hidden bg-background",children:[jsx_runtime.jsxs("div",{className:"mb-4 flex w-full shrink-0 flex-col justify-center bg-card pb-4",style:{minHeight:HEADER_HEIGHT},children:[sidebar&&jsx_runtime.jsx("div",{className:"mb-4 flex h-14 w-full items-center justify-between bg-sidebar text-sidebar-foreground md:hidden",children:jsx_runtime.jsxs(import_max_width_wrapper.MaxWidthWrapper,{className:"relative flex h-full items-center justify-between",children:[sidebar.trigger,jsx_runtime.jsx("img",{alt:"LOKE",className:"absolute left-1/2 my-4 h-8 -translate-x-1/2 brightness-0 invert",src:sidebar.imageUrl}),jsx_runtime.jsx("div",{})]})}),jsx_runtime.jsxs(import_max_width_wrapper.MaxWidthWrapper,{className:"flex flex-wrap items-center justify-between gap-2",children:[jsx_runtime.jsxs(import_box.Box,{className:"flex items-center gap-2",children:[jsx_runtime.jsx("div",{className:"flex size-10 shrink-0 items-center justify-center rounded-full bg-secondary text-secondary-foreground",children:import_react.createElement(header.icon,{strokeWidth:3})}),jsx_runtime.jsxs(import_box.Box,{className:"flex flex-col",children:[jsx_runtime.jsx(import_heading.Heading,{variant:"h3",children:header.title}),header.belowTitle]})]}),header.rightAside]})]}),jsx_runtime.jsx(import_max_width_wrapper.MaxWidthWrapper,{className:"relative flex h-0 min-w-0 flex-1 flex-col overflow-y-auto overflow-x-hidden",children:loading?jsx_runtime.jsx("div",{className:"flex h-full w-full items-center justify-center",children:jsx_runtime.jsx(import_spinner.Spinner,{size:"xl"})}):children})]})};