(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[15536],{64410:(e,s,r)=>{"use strict";r.d(s,{Z:()=>t});/**
 * @license lucide-react v0.460.0 - ISC
 *
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.
 */let t=(0,r(43349).Z)("CircleHelp",[["circle",{cx:"12",cy:"12",r:"10",key:"1mglay"}],["path",{d:"M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3",key:"1u773s"}],["path",{d:"M12 17h.01",key:"p32p05"}]])},40600:(e,s,r)=>{"use strict";r.d(s,{Z:()=>t});/**
 * @license lucide-react v0.460.0 - ISC
 *
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.
 */let t=(0,r(43349).Z)("X",[["path",{d:"M18 6 6 18",key:"1bl5f8"}],["path",{d:"m6 6 12 12",key:"d8bk6v"}]])},40084:(e,s,r)=>{"use strict";r.d(s,{Z:()=>i,m:()=>a});var t=r(67841),n=r(79477);let a=n.createContext({code:"",lang:""}),i=n.memo(function(e){let{code:s,lang:r,children:n}=e;return(0,t.jsx)(a.Provider,{value:{code:s,lang:r},children:n})})},25967:(e,s,r)=>{"use strict";r.d(s,{Z:()=>a});var t=r(64833),n=r(21364);let a=(0,t.z)(n.Wc)({name:"Space",class:"s1hfctpl",propsAsIs:!0});r(55245)},69560:(e,s,r)=>{"use strict";r.d(s,{Z:()=>t.default});var t=r(83928)},15536:(e,s,r)=>{"use strict";r.r(s),r.d(s,{default:()=>T});var t=r(67841),n=r(79477),a=r(64833),i=r(64410),l=r(40600),o=r(74631),c=r(91769),d=r(25967),u=r(40084),p=r(80162),m=r(76533),h=r(69560);let g=(0,a.z)("section")({name:"Wrapper",class:"wisrit8",propsAsIs:!1}),v=(0,a.z)("div")({name:"Grid",class:"gijc6j0",propsAsIs:!1}),j=(0,a.z)(function(e){return(0,t.jsxs)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"70",height:"29",fill:"none",viewBox:"0 0 70 29",...e,children:[(0,t.jsx)("path",{fill:"var(--syntax-bg)",d:"M35 1C25.5 1 20.615 27 1 27v2h68v-2C48.077 27 44.5 1 35 1z"}),(0,t.jsx)("path",{stroke:"var(--color-gray-300)",strokeLinecap:"round",strokeWidth:"2",d:"M1 27C20.615 27 25.5 1 35 1s13.077 26 34 26"})]})})({name:"Tip",class:"t1bolryu",propsAsIs:!0}),x=(0,a.z)("div")({name:"Column",class:"c1r1buo0",propsAsIs:!1}),b=(0,a.z)(x)({name:"MobileColumn",class:"mrpt25n",propsAsIs:!0}),y=(0,a.z)(x)({name:"DesktopColumn",class:"d1aj769",propsAsIs:!0}),k=(0,a.z)("div")({name:"Divider",class:"d18mkrov",propsAsIs:!1}),w=function(e){let{handleDismiss:s,...r}=e;return n.useEffect(()=>{function e(e){"Escape"===e.code&&s()}return window.addEventListener("keydown",e),()=>{window.removeEventListener("keydown",e)}},[s]),(0,t.jsxs)(g,{...r,children:[(0,t.jsx)(j,{}),(0,t.jsxs)(v,{children:[(0,t.jsxs)(b,{style:{"--delay":"350ms"},children:[(0,t.jsx)(h.Z,{includeBorder:!1,width:325,height:325,wrapperStyle:{margin:"18px auto"},src:"/images/interactive-guide-to-grid/assignable-children-pointer.mp4"}),(0,t.jsx)("p",{children:"Tap a single cell to place the child within. Press and drag to span the child across multiple rows and/or columns."})]}),(0,t.jsxs)(y,{style:{"--delay":"350ms"},children:[(0,t.jsx)("h4",{children:"With a pointer device"}),(0,t.jsx)(h.Z,{includeBorder:!1,width:325,height:325,wrapperStyle:{margin:"18px auto"},src:"/images/interactive-guide-to-grid/assignable-children-pointer.mp4"}),(0,t.jsx)("p",{children:"Click a single cell to place the child within. Click and drag to span the child across multiple rows and/or columns."})]}),(0,t.jsx)(k,{style:{"--delay":"380ms"}}),(0,t.jsxs)(y,{style:{"--delay":"420ms"},children:[(0,t.jsx)("h4",{children:"With keyboard"}),(0,t.jsx)(h.Z,{includeBorder:!1,width:325,height:325,wrapperStyle:{margin:"18px auto"},src:"/images/interactive-guide-to-grid/assignable-children-keyboard.mp4"}),(0,t.jsxs)("p",{children:["Tab to focus the first cell, and then use arrow keys to move around. Press ",(0,t.jsx)("kbd",{children:"Enter"})," to enter “placement mode”. Press ",(0,t.jsx)("kbd",{children:"Enter"})," again to lock in the selected placement."]})]})]})]})};r(41619);var f=r(15594);let I=(e,s,r)=>"button-".concat(e.replace(/:/g,""),"-").concat(s,"-").concat(r),A=(0,a.z)(d.Z)({name:"OuterWrapper",class:"o17lus0i",propsAsIs:!0}),z=(0,a.z)("header")({name:"Header",class:"hqd1ik0",propsAsIs:!1}),C=(0,a.z)("button")({name:"Button",class:"b1qnbhvb",propsAsIs:!1}),Z=(0,a.z)(C)({name:"SquareButton",class:"scx171y",propsAsIs:!0}),q=(0,a.z)(C)({name:"LongButton",class:"l1yemk7c",propsAsIs:!0}),E=(0,a.z)("div")({name:"Row",class:"rbgsiuj",propsAsIs:!1}),S=(0,a.z)("div")({name:"DemoWrapper",class:"dk3un81",propsAsIs:!1}),W=(0,a.z)("div")({name:"Grid",class:"g6jq72a",propsAsIs:!1}),D=(0,a.z)("div")({name:"ChildLayer",class:"ch7ifsm",propsAsIs:!1}),L=(0,a.z)(m.Z)({name:"GridChild",class:"g3tjl5r",propsAsIs:!0}),R=(0,a.z)("div")({name:"InteractiveLayer",class:"i1cjixrm",propsAsIs:!1}),B=(0,a.z)("div")({name:"InteractiveWrapper",class:"i30rx4p",propsAsIs:!1}),M=(0,a.z)(W)({name:"InteractiveGrid",class:"i1jpd98j",propsAsIs:!0}),N=(0,a.z)("button")({name:"GridButton",class:"g1x6i8n8",propsAsIs:!1}),G=(0,a.z)(W)({name:"ChildWrapper",class:"c3mbpr",propsAsIs:!0}),P=(0,a.z)(f.c7)({name:"CodeWrapper",class:"cxqv44g",propsAsIs:!0}),T=function(e){let{codeOutput:s}=e,r=n.useId(),[a,d]=n.useState(null),[m,h]=n.useState(null),[g,v]=n.useState(!1),[j,x]=n.useState(!1),b=n.useRef(null),y=n.useRef(a),k=n.useRef(m);y.current=a,k.current=m;let[f,{stop:C}]=(0,c.Z)("/sounds/switch-on.wav",{volume:.1}),[W]=(0,c.Z)("/sounds/plunger-immediate.mp3",{volume:.2}),[T]=(0,c.Z)("/sounds/pop.mp3",{volume:.4}),[_]=(0,c.Z)("/sounds/menu-open.mp3",{volume:.6}),[F]=(0,c.Z)("/sounds/empty-trash.wav",{volume:.4}),H=function(){let{gridRow:e=null,gridCol:s=null}=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},r=null!==e&&null!==s?"grid-row: ".concat(e,";\n  grid-column: ").concat(s,";"):"\n";return".parent {\n  display: grid;\n  grid-template-columns:\n    repeat(".concat(4,", 1fr);\n  grid-template-rows:\n    repeat(").concat(4,", 1fr);\n}\n\n.child {\n  ").concat(r,"\n}")}({gridRow:a,gridCol:m}),K=null!==a&&null!==m,O=n.useCallback(()=>{v(!1),T(),window.removeEventListener("pointerup",O)},[T]),U=n.useCallback(function(e,s){if(!g||!b.current)return;let r=[b.current.rowNum,e].sort(),t=[b.current.colNum,s].sort();r[0]===r[1]&&r.pop(),t[0]===t[1]&&t.pop(),r[1]&&(r[1]+=1),t[1]&&(t[1]+=1);let n=r.join(" / "),a=t.join(" / "),i=!1;n!==y.current&&(d(n),i=!0),a!==k.current&&(h(a),i=!0),i&&(C(),f())},[g,f,C]),V=n.useCallback((0,o.P2)(e=>{let{clientX:s,clientY:r}=e,t=document.elementFromPoint(s,r),n=t.getAttribute("data-row"),a=t.getAttribute("data-col");U(Number(n),Number(a))},50),[U]),X=n.useCallback(()=>{x(!1)},[]);return(0,t.jsxs)(A,{as:"section",children:[(0,t.jsxs)(z,{children:[(0,t.jsx)(p.default,{as:Z,style:{opacity:j?.5:void 0}}),(0,t.jsx)(Z,{"aria-label":"View instructions",onClick:()=>{j||_(),x(!j)},children:(0,t.jsx)(i.Z,{size:24})}),(0,t.jsxs)(q,{style:{opacity:j?.5:void 0},onClick:()=>{d(null),h(null),F()},children:[(0,t.jsx)(l.Z,{}),"Reset"]})]}),(0,t.jsxs)(E,{style:{opacity:j?0:1},children:[(0,t.jsx)(P,{children:(0,t.jsx)(u.Z,{code:H,lang:"css",children:s})}),(0,t.jsxs)(S,{children:[(0,t.jsx)(R,{children:(0,t.jsx)(B,{children:(0,t.jsx)(M,{children:(0,o.w6)(1,5).map(e=>(0,o.w6)(1,5).map(s=>{let n=!j&&1===e&&1===s;return(0,t.jsx)(N,{id:I(r,e,s),"data-row":e,"data-col":s,tabIndex:n?void 0:"-1",style:{cursor:g?"crosshair":"pointer"},onPointerDown:()=>{d(String(e)),h(String(s)),v(!0),b.current={rowNum:e,colNum:s},window.addEventListener("pointerup",O),W()},onTouchMove:e=>{V(e.touches[0])},onMouseEnter:()=>{g&&U(e,s)},onKeyDown:t=>(function(e,s,t){if("Enter"===e.code){let e=!g;e?(b.current={rowNum:s,colNum:t},W(),d(s),h(t)):(b.current=null,T()),v(e);return}let n=s,a=t;switch(e.code){case"ArrowLeft":e.preventDefault(),(a-=1)<1&&(n-=1,a=4),n<1&&(n=4);break;case"ArrowRight":e.preventDefault(),(a+=1)>4&&(n+=1,a=1),n>4&&(n=1);break;case"ArrowUp":e.preventDefault(),(n-=1)<1&&(n=4);break;case"ArrowDown":e.preventDefault(),(n+=1)>4&&(n=1)}let i=I(r,n,a);document.querySelector("#"+i).focus(),g&&U(n,a)})(t,e,s)},"".concat(e,"-").concat(s))}))})})}),(0,t.jsx)(D,{children:(0,t.jsx)(G,{children:K&&(0,t.jsx)(L,{layout:!1,style:{gridRow:a,gridColumn:m,opacity:g?.5:.9}})})})]})]}),j&&(0,t.jsx)(w,{style:{gridArea:"main-content"},handleDismiss:X})]})};r(96440)},15594:(e,s,r)=>{"use strict";r.d(s,{G0:()=>o,c7:()=>i,oS:()=>l,oy:()=>a});var t=r(64833),n=r(45700);let a=(0,t.z)("div")({name:"GridStructure",class:"g1nrkimi",propsAsIs:!1}),i=(0,t.z)("div")({name:"BaseCodeWrapper",class:"bu47715",propsAsIs:!1}),l=(0,t.z)(n.E.div)({name:"LabeledColumn",class:"ljraie7",propsAsIs:!0}),o=(0,t.z)(n.E.div)({name:"LabeledRow",class:"l12tgnsh",propsAsIs:!0});r(19351)},76533:(e,s,r)=>{"use strict";r.d(s,{Z:()=>o});var t=r(67841),n=r(64833),a=r(45700);let i=(0,n.z)(a.E.div)({name:"Wrapper",class:"wg9umku",propsAsIs:!0}),l=(0,n.z)(a.E.div)({name:"InnerWrapper",class:"iizukyq",propsAsIs:!0}),o=function(e){let{ref:s,primary:r,layout:n=!0,style:o={},wrapperStyle:c={},textWrapperStyle:d={},children:u,...p}=e;return(0,t.jsx)(i,{ref:s,layout:n,initial:{borderRadius:4},style:{background:r?"hsl(50deg 100% 90%)":"var(--color-gray-500)",...o},...p,children:(0,t.jsx)(l,{layout:n,initial:{borderRadius:2},style:{color:r?"black":"var(--color-text)",background:r?"hsl(50deg 100% 50%)":"var(--color-gray-100)",...c},children:(0,t.jsx)(a.E.span,{layout:n,style:{display:"inline-block",...d},children:u})})})};r(76206)},96440:e=>{e.exports={o17lus0i:"o17lus0i",hqd1ik0:"hqd1ik0",b1qnbhvb:"b1qnbhvb",scx171y:"scx171y",l1yemk7c:"l1yemk7c",rbgsiuj:"rbgsiuj",dk3un81:"dk3un81",g6jq72a:"g6jq72a",ch7ifsm:"ch7ifsm",i1cjixrm:"i1cjixrm",i30rx4p:"i30rx4p",i1jpd98j:"i1jpd98j",g1x6i8n8:"g1x6i8n8",c3mbpr:"c3mbpr",cxqv44g:"cxqv44g"}},41619:e=>{e.exports={wisrit8:"wisrit8",fadeIn:"fadeIn",gijc6j0:"gijc6j0",t1bolryu:"t1bolryu","bulge-t1bolryu":"bulge-t1bolryu",c1r1buo0:"c1r1buo0","contentRise-c1r1buo0":"contentRise-c1r1buo0",mrpt25n:"mrpt25n",d1aj769:"d1aj769",d18mkrov:"d18mkrov"}},19351:e=>{e.exports={g1nrkimi:"g1nrkimi",bu47715:"bu47715",ljraie7:"ljraie7",l12tgnsh:"l12tgnsh"}},76206:e=>{e.exports={wg9umku:"wg9umku",fadeFromTransparent:"fadeFromTransparent",iizukyq:"iizukyq"}}}]);
//# sourceMappingURL=15536.18b905ffd2b82631.js.map