@loke/design-system
Version:
A design system with individually importable components
2 lines (1 loc) • 2.07 kB
JavaScript
import{Box}from"@loke/design-system/box";import{Heading}from"@loke/design-system/heading";import{MaxWidthWrapper}from"@loke/design-system/max-width-wrapper";import{Spinner}from"@loke/design-system/spinner";import{createContext,createElement,useContext}from"react";import{jsx,jsxs}from"react/jsx-runtime";var PageLayoutSidebarContext=createContext(null);function PageLayoutSidebarProvider({children,sidebar}){return jsx(PageLayoutSidebarContext.Provider,{value:sidebar,children})}var HEADER_HEIGHT="8rem",PageLayout=({children,header,loading,sidebar:sidebarProp})=>{let sidebarContext=useContext(PageLayoutSidebarContext),sidebar=sidebarProp??sidebarContext;return jsxs("div",{className:"flex h-screen max-h-screen w-full flex-col overflow-hidden bg-background",children:[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("div",{className:"mb-4 flex h-14 w-full items-center justify-between bg-sidebar text-sidebar-foreground md:hidden",children:jsxs(MaxWidthWrapper,{className:"relative flex h-full items-center justify-between",children:[sidebar.trigger,jsx("img",{alt:"LOKE",className:"absolute left-1/2 my-4 h-8 -translate-x-1/2 brightness-0 invert",src:sidebar.imageUrl}),jsx("div",{})]})}),jsxs(MaxWidthWrapper,{className:"flex flex-wrap items-center justify-between gap-2",children:[jsxs(Box,{className:"flex items-center gap-2",children:[jsx("div",{className:"flex size-10 shrink-0 items-center justify-center rounded-full bg-secondary text-secondary-foreground",children:createElement(header.icon,{strokeWidth:3})}),jsxs(Box,{className:"flex flex-col",children:[jsx(Heading,{variant:"h3",children:header.title}),header.belowTitle]})]}),header.rightAside]})]}),jsx(MaxWidthWrapper,{className:"relative flex h-0 min-w-0 flex-1 flex-col overflow-y-auto overflow-x-hidden",children:loading?jsx("div",{className:"flex h-full w-full items-center justify-center",children:jsx(Spinner,{size:"xl"})}):children})]})};export{PageLayoutSidebarProvider,PageLayout,HEADER_HEIGHT};