@useloops/design-system
Version:
The official React based Loops design system
2 lines (1 loc) • 1.8 kB
JavaScript
;Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("@mui/material"),o=require("react"),i=require("../../../utils/breakpoint.hook.js"),r=require("../../../utils/useKeyCombo.js"),s=require("../Typography/Typography.js");const l=t.styled(t.Box)(({position:e,theme:t})=>({alignItems:"center",display:"flex",flexDirection:"column",height:"100%",left:0,pointerEvents:"none",position:e,top:0,width:"100%",zIndex:t.zIndex.tooltip})),n=t.styled(t.Container)(({theme:e})=>({background:e.custom.palette.red[300],display:"flex",flex:1,opacity:.2,position:"relative"})),d=t.styled(t.Box)(({theme:e})=>({background:e.custom.palette.purple[300],display:"flex",flex:1})),a=t.styled(t.Box)(({theme:e})=>({background:e.custom.palette.green[300],height:"100%"})),p=t.styled(t.Box)(({theme:e})=>({backgroundColor:e.custom.palette.surface.default,borderRadius:e.spacing(e.custom.radius.md),bottom:16,boxShadow:e.custom.elevation.overlay,display:"block",left:16,padding:e.spacing(1,2),position:"fixed"}));exports.GridContainer=n,exports.default=({breakpoint:c=!0,maxWidth:u=!1,position:x="fixed",visible:m=!1})=>{const h=Array.from({length:6},(e,t)=>t),g=i.useBreakpoint(),[y,b]=o.useState(m);return r.useKeyCombo("cmd+g",e=>{e.preventDefault(),console.log("Command+G keyboard shortcut triggered"),b(!y)}),y&&e.jsxs(l,{position:x,children:[e.jsx(n,{maxWidth:!!u&&"xl",children:e.jsx(d,{children:e.jsxs(t.Grid,{container:!0,spacing:2,sx:{flex:1},children:[h.map(o=>e.jsx(t.Grid,{sx:{display:{sm:"none",md:"block"}},size:"grow",children:e.jsx(a,{})},`grid-1-${o}`)),h.map(o=>e.jsx(t.Grid,{sx:{display:{sm:"block"}},size:"grow",children:e.jsx(a,{})},`grid-2-${o}`))]})})}),c&&e.jsx(p,{children:e.jsx(s,{variation:"md",component:"p",weight:"bold",children:g})})]})};