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