https://blog.maximeheckel.com/_next/static/chunks/5508.c089a0d8feda0b22.js

1"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[5508],{16113:(e,t,n)=>{n.d(t,{o:()=>i});var r=n(67002),a=n(16466),s=n(63137);let o=(0,a.createContext)(null);var l=n(94790),u=n(64626);let d=e=>!e.isLayoutDirty&&e.willUpdate(!1),i=({children:e,id:t,inherit:n=!0})=>{let i=(0,a.useContext)(s.L),c=(0,a.useContext)(o),[p,x]=function(){let e=function(){let e=(0,a.useRef)(!1);return(0,u.E)(()=>(e.current=!0,()=>{e.current=!1}),[]),e}(),[t,n]=(0,a.useState)(0),r=(0,a.useCallback)(()=>{e.current&&n(t+1)},[t]);return[(0,a.useCallback)(()=>l.Gt.postRender(r),[r]),t]}(),h=(0,a.useRef)(null),b=i.id||c;null===h.current&&((e=>!0==(!0===e)||"id"===e)(n)&&b&&(t=t?b+"-"+t:b),h.current={id:t,group:!0===n&&i.group||function(){let e=new Set,t=new WeakMap,n=()=>e.forEach(d);return{add:r=>{e.add(r),t.set(r,r.addEventListener("willUpdate",n))},remove:r=>{e.delete(r);let a=t.get(r);a&&(a(),t.delete(r)),n()},dirty:n}}()});let g=(0,a.useMemo)(()=>({...h.current,forceRender:p}),[x]);return(0,r.jsx)(s.L.Provider,{value:g,children:e})}},75508:(e,t,n)=>{n.r(t),n.d(t,{default:()=>x});var r=n(67002),a=n(63933),s=n(77809),o=n(9642),l=n(14699),u=n(42475),d=n(16113),i=n(16466),c=n(50883);let p=()=>{let[e,t]=i.useState(null),[n,l]=i.useState("Item 1");return(0,r.jsx)(a.a,{as:"ul",alignItems:"center",css:{padding:"var(--space-2) var(--space-4)",background:"var(--card-background)",borderRadius:"var(--border-radius-1)",width:"fit-content",border:"1px solid var(--border-color)"},gap:6,onMouseLeave:()=>t(null),children:["Item 1","Item 2","Item 3"].map(a=>(0,r.jsxs)(s.a,{as:"li",css:{position:"relative",listStyle:"none",cursor:"pointer",width:"50px",height:"30px",outline:"none"},onClick:()=>l(a),onKeyDown:e=>"Enter"===e.key?l(a):null,onFocus:()=>t(a),onMouseEnter:()=>t(a),tabIndex:0,children:[(0,r.jsx)(o.c,{size:"1",css:{position:"absolute",left:4,right:0,top:2,bottom:0,zIndex:1,userSelect:"none"},children:a}),e===a?(0,r.jsx)(s.a,{as:u.P.div,transition:{layout:{duration:.2,ease:"easeOut"}},css:{position:"absolute",bottom:"-2px",left:"-10px",right:0,width:"140%",height:"110%",background:"var(--foreground)",borderRadius:"var(--border-radius-1)",zIndex:0},layoutId:"highlight"}):null,n===a?(0,r.jsx)(s.a,{as:u.P.div,css:{position:"absolute",bottom:"-10px",left:"0px",right:0,height:"4px",background:"var(--accent)",borderRadius:"var(--border-radius-1)",zIndex:0},layoutId:"underline"}):null]},a))})},x=e=>{let{layoutGroup:t}=e;return(0,r.jsxs)(l.a,{children:[(0,r.jsx)(l.a.Body,{dotMatrix:!0,children:(0,r.jsx)(a.a,{direction:"column",gap:"4",children:t?(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(d.o,{id:"tab1",children:(0,r.jsx)(p,{})}),(0,r.jsx)(d.o,{id:"tab2",children:(0,r.jsx)(p,{})})]}):(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(p,{}),(0,r.jsx)(p,{})]})})}),t?(0,r.jsx)(c.HighlightedCodeText,{codeString:"const Tabs = ({ id }) => {\n  const [focused, setFocused]\n    = React.useState(null);\n  const [selected, setSelected]\n    = React.useState('Item 1');\n  const tabs = [\n    'Item 1', \n    'Item 2', \n    'Item 3'\n  ];\n\n  return (\n    <LayoutGroup id={id}>\n      <Wrapper\n        onMouseLeave={() => \n          setFocused(null)\n        }\n      >\n        {tabs.map((item) => (\n          <Tab {/*...*/}>\n  {/* Tab implementation... */}\n          </Tab>\n        )}\n      </Wrapper>\n    </LayoutGroup>\n  );",language:"jsx"}):null]})}}}]);