diff --git a/assets/index-2-inrFBs.js b/assets/index-BlgE6WWV.js similarity index 96% rename from assets/index-2-inrFBs.js rename to assets/index-BlgE6WWV.js index 3675f51..caea7d5 100644 --- a/assets/index-2-inrFBs.js +++ b/assets/index-BlgE6WWV.js @@ -77,4 +77,4 @@ Error generating stack: `+i.message+` rgba(237, 237, 237, 1) 0%, rgba(246, 246, 246, 1) 53%, rgba(247, 247, 247, 1) 100% - );border-top:1px solid `,e?"transparent":"var(--border-color)",";box-shadow:",e?"0 -5px 10px -6px var(--color-primary)":"none",";background:",e?"white":"var(--gradient)",";:hover{.tab-close-trigger{display:block;}.tab-title{opacity:0.5;}.truncate-on-hover{overflow:hidden;display:block;text-overflow:ellipsis;white-space:nowrap;width:calc(100% - 3px);}}:after{content:",e?'""':"none",";right:0;top:-1px;height:3px;background:var(--color-primary);position:absolute;transform:translateX(1px);width:calc(100% + 2px);}:before{position:absolute;content:",e?'""':"none",";width:100%;background:white;height:1px;bottom:-1px;left:0;}",""),Sw={name:"evtqhz",styles:'position:absolute;top:50%;transform-origin:center;transform:translateY(-50%);right:7px;:after,:before{position:absolute;top:50%;left:50%;content:"";width:2px;height:8px;transform-origin:center;transform:translate(-50%, -50%) rotate(45deg);background-color:white;}:before{transform:translate(-50%, -50%) rotate(-45deg);}background-color:#a33b3b;opacity:0.7;align-items:center;width:11px;height:11px;border-radius:10px;display:none;:hover{opacity:1;}'};function ql(e){const{onActiveTabIdChange:t=Fr,apiRef:n}=e,o=E.useRef({})||n;nm(o,e);const{tabs:i,activeTabId:l}=o.current.getState(),a=ec();return qu()&&a&&(a.current.registerChildTabsApi(a.current),o.current.registerParentTabsApi(a.current)),E.useEffect(()=>{const u=a==null?void 0:a.current;return()=>{var f;(f=u==null?void 0:u.unregisterChildTabsApi)==null||f.call(u)}},[a]),xe(tm,{apiRef:o,children:[R("div",{css:Ew,children:i.map(u=>R(wl,{tab:u,children:R(yw,{onActiveTabIdChange:t,onClose:o.current.closeTab})},u.id))}),R("div",{css:xw,children:i.map(u=>l===u.id&&R(wl,{tab:u,children:u.content},u.id))})]})}const xw={name:"1rh6ffa",styles:"flex-grow:1;border:1px solid var(--border-color);padding:10px"},Ew={name:"ug4lqy",styles:"display:flex;height:28px;column-gap:2px"},rm=[{id:1,title:"IPhone 16"},{id:2,title:"Samsung Galaxy S12"}],om=({columns:e,rows:t,onRowClick:n})=>xe("div",{css:Cw,children:[R("div",{css:kw,children:R("div",{css:Pw,children:e.map((r,o)=>R("div",{style:{width:r.width||100},css:Lw,children:r.name},o))})}),R("div",{css:Tw,children:t.map((r,o)=>R("div",{css:Rw,onClick:()=>{n==null||n(r)},children:e.map((i,l)=>R("div",{style:{width:i.width||100},css:_w,children:r[i.field]},l))},o))})]}),Cw={name:"g929o6",styles:"border:1px solid var(--border-color)"},kw=oc("",""),Tw=oc("",""),Pw={name:"zjik7",styles:"display:flex"},Rw={name:"1cg5bon",styles:"display:flex;border-top:1px solid var(--border-color);cursor:pointer"},_w={name:"1tr524z",styles:"padding:2px 8px;font-size:12px;border-right:1px solid var(--border-color)"},Lw={name:"xf12rk",styles:"border-right:1px solid var(--border-color);padding:8px;font-size:13px"},Nw=e=>{const{children:t,...n}=e;return R("button",{css:Mw,...n,children:t})},Mw={name:"1434k7o",styles:"color:white;background-color:#5cb85c;padding:6px 12px;border-radius:4px;border:none;cursor:pointer;:hover{background-color:rgb(68, 157, 68);}"},Dw=e=>e.length-1,zw={name:"clip-one__product-tabs",version:"4.0"};function Iw(){const{router:e}=tr(),{getTabsFromStorage:t,persistTabs:n}=Hr({storageKey:zw,storage:Wr}),[r]=E.useState(()=>({id:$a,route:{id:$a},path:$a})),[o]=E.useState(()=>[{title:()=>"All products",shouldOpen:k=>k.route.path===Yo,insertAt:Gt},{title:k=>rm.find(d=>{var m;return String(d.id)===((m=k.params)==null?void 0:m.id)}).title,shouldOpen:k=>k.route.path===Bn,insertAt:()=>a.length},{title:()=>"New product",shouldOpen:k=>k.route.path===Gu,insertAt:Dw}]),[i,l]=E.useState(()=>Qr(t()||[r],e.routes.slice())),[a,s]=E.useState([Yo]),[u,f]=E.useState([]),{activeTabId:c,setActiveTabId:p,getTabTitleByTabPath:x}=nr({router:e,config:o,fallbackPath:Je,tabs:i,onTabsChange:l});E.useEffect(()=>n(i),[i,n]);const g=i.map(k=>({id:k.id,content:R(er,{}),title:x(k.path),isClosable:!a.includes(k.id)}));return R("div",{css:$w,children:R(ql,{tabs:g,onTabsChange:k=>{l(k.map(h=>{const d=i.find(m=>m.id===h.id);return{id:h.id,route:d.route,path:d.path}}))},onStartPinnedTabsChange:s,startPinnedTabs:a,endPinnedTabs:u,onEndPinnedTabsChange:f,initialActiveTabId:c,initialTabs:g,initialStartPinnedTabs:a,hasControlledActiveTabId:!0,activeTabId:c,onActiveTabIdChange:p})})}function Ow(){const e=Qu();return xe("div",{children:[R("div",{children:R(Nw,{onClick:()=>{e(Gu)},children:"create new product"})}),R("div",{style:{marginTop:10},children:R(om,{onRowClick:t=>{e(Bn.replace(":id",String(t.id)))},columns:[{field:"id",name:"ID",width:40},{field:"title",name:"Title",width:150}],rows:rm})})]})}const $w={name:"13ku56z",styles:"display:flex;flex-direction:column;height:100%"};function Aw(){const e=Zl(),{router:t}=tr(),n=E.useMemo(()=>({id:Bn.replace(":id",e.id),route:{id:Bn},path:Bn.replace(":id",e.id)}),[e.id]),r=E.useMemo(()=>({id:ho.replace(":id",e.id),route:{id:ho},path:ho.replace(":id",e.id)}),[e.id]),[o,i]=E.useState([n,r]);E.useEffect(()=>{i([n,r])},[n,r]);const l=E.useMemo(()=>[{title:()=>"General",shouldOpen:p=>p.route.path===Bn,insertAt:Gt},{title:()=>"Settings",shouldOpen:p=>p.route.path===ho,insertAt:Gt}],[]),{activeTabId:a,setActiveTabId:s,getTabTitleByTabPath:u}=nr({router:t,config:l,fallbackPath:Je,tabs:o,onTabsChange:i}),f=o.map(p=>({id:p.id,content:R(er,{}),title:u(p.path),isClosable:!1}));return R("div",{css:Fw,children:R(ql,{tabs:f,onTabsChange:p=>{i(p.map(x=>{const g=o.find(y=>y.id===x.id);return{id:x.id,route:g.route,path:g.path}}))},initialActiveTabId:a,initialTabs:f,hasControlledActiveTabId:!0,activeTabId:a,onActiveTabIdChange:s})})}const Fw={name:"b9tb9x",styles:"flex-grow:1;height:100%;display:flex;flex-direction:column"};function Uw(){return R("div",{children:"General"})}function jw(){return R("div",{children:"Settings"})}function bw(){return R("div",{children:"Create product"})}const im=[{id:1,title:"Laptops"},{id:2,title:"Phones"}],Bw={name:"clip-one__category-tabs",version:"4.0"};function Vw(){const{router:e}=tr(),{getTabsFromStorage:t,persistTabs:n}=Hr({storageKey:Bw,storage:Wr}),r=[{id:vn,route:{id:vn},path:vn}],[o,i]=E.useState(()=>Qr(t()||r,e.routes.slice()));E.useEffect(()=>n(o),[o,n]);const[l,a]=E.useState([vn]),s=E.useMemo(()=>[{title:()=>"All Categories",shouldOpen:g=>g.route.path===vn,insertAt:Gt},{title:({params:g})=>im.find(k=>String(k.id)==g.id).title,shouldOpen:g=>g.route.path===Xu,insertAt:()=>l.length}],[]),{activeTabId:u,setActiveTabId:f,getTabTitleByTabPath:c}=nr({router:e,config:s,fallbackPath:Je,tabs:o,onTabsChange:i}),p=o.map(g=>({id:g.id,content:R(er,{}),title:c(g.path),isClosable:!l.includes(g.id)}));return R("div",{css:Ww,children:R(ql,{activeTabId:u,onActiveTabIdChange:f,tabs:p,startPinnedTabs:l,initialActiveTabId:u,initialTabs:p,initialStartPinnedTabs:l,onTabsChange:g=>{i(g.map(y=>{const k=o.find(h=>h.id===y.id);return{id:y.id,route:k.route,path:k.path}}))},hasControlledActiveTabId:!0,onStartPinnedTabsChange:a})})}function Hw(){const e=Qu();return R("div",{children:R(om,{rows:im,onRowClick:t=>{e(Xu.replace(":id",String(t.id)))},columns:[{field:"id",name:"ID",width:40},{field:"title",name:"Title",width:100}]})})}const Ww={name:"13ku56z",styles:"display:flex;flex-direction:column;height:100%"};function Qw(){const e=Zl();return xe("div",{children:["category ",e.id]})}function Kw(){return R("div",{children:"suppliers"})}const Yw=()=>xe("nav",{css:Gw,children:[R(Ke,{css:_i,to:Zu,children:"Dashboard"}),R(Ke,{css:_i,to:Yo,children:"Products"}),R(Ke,{css:_i,to:vn,children:"Categories"}),R(Ke,{css:_i,to:Ju,children:"Suppliers"})]}),_i={name:"1xgomty",styles:"padding:10px 15px;border-bottom:1px solid var(--border-color);font-size:14px;color:var(--foreground-color-inverse);text-decoration:none"},Gw={name:"1fttcpj",styles:"display:flex;flex-direction:column"};function Xw(){return xe("aside",{css:qw,children:[R("div",{css:Jw,children:R(Ke,{css:Zw,to:Yu,children:"back to examples"})}),R(Yw,{})]})}const Jw=[{name:"1p4wz8g",styles:"position:absolute;bottom:20px;left:15px"}],Zw={name:"1lbqjm6",styles:"font-size:14px;color:var(--foreground-color-inverse);text-decoration:none"},qw={name:"gzbxbx",styles:"background-color:var(--background-color-inverse);border-right:1px solid var(--border-color)"},eS=E.memo(Xw),tS={name:"clip-one__main-tabs",version:"4.0"};function nS(){const{router:e}=tr(),{getTabsFromStorage:t,persistTabs:n}=Hr({storage:Wr,storageKey:tS}),[r,o]=E.useState(()=>Qr(t()||[],e.routes.slice())),[i,l]=E.useState([]),[a]=E.useState(()=>[{title:()=>"Dashboard",shouldOpen:x=>x.route.path===Zu,insertAt:Gt},{title:()=>"Categories",shouldOpen:x=>x.route.path===vn,insertAt:Gt},{title:()=>"Products",shouldOpen:x=>x.route.path===Yo,insertAt:Gt},{title:()=>"Suppliers",shouldOpen:x=>x.route.path===Ju,insertAt:Gt}]),{activeTabId:s,setActiveTabId:u,getTabTitleByTabPath:f}=nr({router:e,config:a,tabs:r,onTabsChange:o,fallbackPath:Je});E.useEffect(()=>n(r),[r,n]);const c=r.map(x=>({id:x.id,content:R(er,{}),title:f(x.path),isClosable:!0}));return xe("div",{css:oS,children:[R("header",{css:lS,children:"John Doe"}),xe("div",{css:rS,children:[R(eS,{}),R("div",{css:iS,children:R("div",{css:aS,children:R(ql,{tabs:c,onTabsChange:x=>{o(x.map(g=>{const y=r.find(k=>k.id===g.id);return{id:g.id,route:y.route,path:y.path}}))},onStartPinnedTabsChange:l,startPinnedTabs:i,initialActiveTabId:s,initialTabs:c,initialStartPinnedTabs:i,hasControlledActiveTabId:!0,activeTabId:s,onActiveTabIdChange:u})})})]})]})}const rS={name:"1ohy2wd",styles:"flex-grow:1;width:100%;display:grid;grid-template-columns:225px 1fr"},oS={name:"dewh7u",styles:"--border-color:rgba(221, 221, 221);--border-color-inverse:rgb(85, 85, 85);--color-primary:#569099;--header-height:42px;--background-color-inverse:rgb(245, 245, 245);--foreground-color-inverse:rgb(85, 85, 85);box-sizing:border-box;min-height:100vh;display:flex;flex-direction:column"},iS={name:"1fttcpj",styles:"display:flex;flex-direction:column"},lS={name:"1kvzxno",styles:"height:var(--header-height);border-bottom:1px solid var(--border-color);background-color:var(--background-color-inverse);display:flex;align-items:center;padding:0 16px;justify-content:end"},aS={name:"1kqp5b1",styles:"padding:10px;flex-grow:1;display:flex;flex-direction:column"};function sS(){return R("div",{children:"dashboard"})}const uS=[{path:Yo,element:R(Iw,{}),children:[{index:!0,element:R(Ow,{})},{path:Gu,element:R(bw,{})},{path:Bn,element:R(Aw,{}),children:[{index:!0,element:R(Uw,{})},{path:ho,element:R(jw,{})}]}]}],cS=[{path:vn,element:R(Vw,{}),children:[{index:!0,element:R(Hw,{})},{path:Xu,element:R(Qw,{})}]}],dS=[{path:Ju,element:R(Kw,{})}],fS={path:Zu,element:R(sS,{})},pS=[{path:Je,element:R(nS,{}),children:[{index:!0,element:R(gw,{})},fS,...uS,...cS,...dS]}],hS=f1([{path:Yu,element:R(P1,{})},...vw,...pS]);function mS(){return R(x1,{router:hS})}Ba.createRoot(document.getElementById("root")).render(R(hf.StrictMode,{children:R(mS,{})})); + );border-top:1px solid `,e?"transparent":"var(--border-color)",";box-shadow:",e?"0 -5px 10px -6px var(--color-primary)":"none",";background:",e?"white":"var(--gradient)",";:hover{.tab-close-trigger{display:block;}.tab-title{opacity:0.5;}.truncate-on-hover{overflow:hidden;display:block;text-overflow:ellipsis;white-space:nowrap;width:calc(100% - 3px);}}:after{content:",e?'""':"none",";right:0;top:-1px;height:3px;background:var(--color-primary);position:absolute;transform:translateX(1px);width:calc(100% + 2px);}:before{position:absolute;content:",e?'""':"none",";width:100%;background:white;height:1px;bottom:-1px;left:0;}",""),Sw={name:"evtqhz",styles:'position:absolute;top:50%;transform-origin:center;transform:translateY(-50%);right:7px;:after,:before{position:absolute;top:50%;left:50%;content:"";width:2px;height:8px;transform-origin:center;transform:translate(-50%, -50%) rotate(45deg);background-color:white;}:before{transform:translate(-50%, -50%) rotate(-45deg);}background-color:#a33b3b;opacity:0.7;align-items:center;width:11px;height:11px;border-radius:10px;display:none;:hover{opacity:1;}'};function ql(e){const{onActiveTabIdChange:t=Fr,apiRef:n}=e,o=E.useRef({})||n;nm(o,e);const{tabs:i,activeTabId:l}=o.current.getState(),a=ec();return qu()&&a&&(a.current.registerChildTabsApi(a.current),o.current.registerParentTabsApi(a.current)),E.useEffect(()=>{const u=a==null?void 0:a.current;return()=>{var f;(f=u==null?void 0:u.unregisterChildTabsApi)==null||f.call(u)}},[a]),xe(tm,{apiRef:o,children:[R("div",{css:Ew,children:i.map(u=>R(wl,{tab:u,children:R(yw,{onActiveTabIdChange:t,onClose:o.current.closeTab})},u.id))}),R("div",{css:xw,children:i.map(u=>l===u.id&&R(wl,{tab:u,children:u.content},u.id))})]})}const xw={name:"1rh6ffa",styles:"flex-grow:1;border:1px solid var(--border-color);padding:10px"},Ew={name:"ug4lqy",styles:"display:flex;height:28px;column-gap:2px"},rm=[{id:1,title:"IPhone 16"},{id:2,title:"Samsung Galaxy S12"}],om=({columns:e,rows:t,onRowClick:n})=>xe("div",{css:Cw,children:[R("div",{css:kw,children:R("div",{css:Pw,children:e.map((r,o)=>R("div",{style:{width:r.width||100},css:Lw,children:r.name},o))})}),R("div",{css:Tw,children:t.map((r,o)=>R("div",{css:Rw,onClick:()=>{n==null||n(r)},children:e.map((i,l)=>R("div",{style:{width:i.width||100},css:_w,children:r[i.field]},l))},o))})]}),Cw={name:"g929o6",styles:"border:1px solid var(--border-color)"},kw=oc("",""),Tw=oc("",""),Pw={name:"zjik7",styles:"display:flex"},Rw={name:"1cg5bon",styles:"display:flex;border-top:1px solid var(--border-color);cursor:pointer"},_w={name:"1tr524z",styles:"padding:2px 8px;font-size:12px;border-right:1px solid var(--border-color)"},Lw={name:"xf12rk",styles:"border-right:1px solid var(--border-color);padding:8px;font-size:13px"},Nw=e=>{const{children:t,...n}=e;return R("button",{css:Mw,...n,children:t})},Mw={name:"1434k7o",styles:"color:white;background-color:#5cb85c;padding:6px 12px;border-radius:4px;border:none;cursor:pointer;:hover{background-color:rgb(68, 157, 68);}"},Dw=e=>e.length,zw={name:"clip-one__product-tabs",version:"4.0"};function Iw(){const{router:e}=tr(),{getTabsFromStorage:t,persistTabs:n}=Hr({storageKey:zw,storage:Wr}),[r]=E.useState(()=>({id:$a,route:{id:$a},path:$a})),[o]=E.useState(()=>[{title:()=>"All products",shouldOpen:k=>k.route.path===Yo,insertAt:Gt},{title:k=>rm.find(d=>{var m;return String(d.id)===((m=k.params)==null?void 0:m.id)}).title,shouldOpen:k=>k.route.path===Bn,insertAt:()=>a.length},{title:()=>"New product",shouldOpen:k=>k.route.path===Gu,insertAt:Dw}]),[i,l]=E.useState(()=>Qr(t()||[r],e.routes.slice())),[a,s]=E.useState([Yo]),[u,f]=E.useState([]),{activeTabId:c,setActiveTabId:p,getTabTitleByTabPath:x}=nr({router:e,config:o,fallbackPath:Je,tabs:i,onTabsChange:l});E.useEffect(()=>n(i),[i,n]);const g=i.map(k=>({id:k.id,content:R(er,{}),title:x(k.path),isClosable:!a.includes(k.id)}));return R("div",{css:$w,children:R(ql,{tabs:g,onTabsChange:k=>{l(k.map(h=>{const d=i.find(m=>m.id===h.id);return{id:h.id,route:d.route,path:d.path}}))},onStartPinnedTabsChange:s,startPinnedTabs:a,endPinnedTabs:u,onEndPinnedTabsChange:f,initialActiveTabId:c,initialTabs:g,initialStartPinnedTabs:a,hasControlledActiveTabId:!0,activeTabId:c,onActiveTabIdChange:p})})}function Ow(){const e=Qu();return xe("div",{children:[R("div",{children:R(Nw,{onClick:()=>{e(Gu)},children:"create new product"})}),R("div",{style:{marginTop:10},children:R(om,{onRowClick:t=>{e(Bn.replace(":id",String(t.id)))},columns:[{field:"id",name:"ID",width:40},{field:"title",name:"Title",width:150}],rows:rm})})]})}const $w={name:"13ku56z",styles:"display:flex;flex-direction:column;height:100%"};function Aw(){const e=Zl(),{router:t}=tr(),n=E.useMemo(()=>({id:Bn.replace(":id",e.id),route:{id:Bn},path:Bn.replace(":id",e.id)}),[e.id]),r=E.useMemo(()=>({id:ho.replace(":id",e.id),route:{id:ho},path:ho.replace(":id",e.id)}),[e.id]),[o,i]=E.useState([n,r]);E.useEffect(()=>{i([n,r])},[n,r]);const l=E.useMemo(()=>[{title:()=>"General",shouldOpen:p=>p.route.path===Bn,insertAt:Gt},{title:()=>"Settings",shouldOpen:p=>p.route.path===ho,insertAt:Gt}],[]),{activeTabId:a,setActiveTabId:s,getTabTitleByTabPath:u}=nr({router:t,config:l,fallbackPath:Je,tabs:o,onTabsChange:i}),f=o.map(p=>({id:p.id,content:R(er,{}),title:u(p.path),isClosable:!1}));return R("div",{css:Fw,children:R(ql,{tabs:f,onTabsChange:p=>{i(p.map(x=>{const g=o.find(y=>y.id===x.id);return{id:x.id,route:g.route,path:g.path}}))},initialActiveTabId:a,initialTabs:f,hasControlledActiveTabId:!0,activeTabId:a,onActiveTabIdChange:s})})}const Fw={name:"b9tb9x",styles:"flex-grow:1;height:100%;display:flex;flex-direction:column"};function Uw(){return R("div",{children:"General"})}function jw(){return R("div",{children:"Settings"})}function bw(){return R("div",{children:"Create product"})}const im=[{id:1,title:"Laptops"},{id:2,title:"Phones"}],Bw={name:"clip-one__category-tabs",version:"4.0"};function Vw(){const{router:e}=tr(),{getTabsFromStorage:t,persistTabs:n}=Hr({storageKey:Bw,storage:Wr}),r=[{id:vn,route:{id:vn},path:vn}],[o,i]=E.useState(()=>Qr(t()||r,e.routes.slice()));E.useEffect(()=>n(o),[o,n]);const[l,a]=E.useState([vn]),s=E.useMemo(()=>[{title:()=>"All Categories",shouldOpen:g=>g.route.path===vn,insertAt:Gt},{title:({params:g})=>im.find(k=>String(k.id)==g.id).title,shouldOpen:g=>g.route.path===Xu,insertAt:()=>l.length}],[]),{activeTabId:u,setActiveTabId:f,getTabTitleByTabPath:c}=nr({router:e,config:s,fallbackPath:Je,tabs:o,onTabsChange:i}),p=o.map(g=>({id:g.id,content:R(er,{}),title:c(g.path),isClosable:!l.includes(g.id)}));return R("div",{css:Ww,children:R(ql,{activeTabId:u,onActiveTabIdChange:f,tabs:p,startPinnedTabs:l,initialActiveTabId:u,initialTabs:p,initialStartPinnedTabs:l,onTabsChange:g=>{i(g.map(y=>{const k=o.find(h=>h.id===y.id);return{id:y.id,route:k.route,path:k.path}}))},hasControlledActiveTabId:!0,onStartPinnedTabsChange:a})})}function Hw(){const e=Qu();return R("div",{children:R(om,{rows:im,onRowClick:t=>{e(Xu.replace(":id",String(t.id)))},columns:[{field:"id",name:"ID",width:40},{field:"title",name:"Title",width:100}]})})}const Ww={name:"13ku56z",styles:"display:flex;flex-direction:column;height:100%"};function Qw(){const e=Zl();return xe("div",{children:["category ",e.id]})}function Kw(){return R("div",{children:"suppliers"})}const Yw=()=>xe("nav",{css:Gw,children:[R(Ke,{css:_i,to:Zu,children:"Dashboard"}),R(Ke,{css:_i,to:Yo,children:"Products"}),R(Ke,{css:_i,to:vn,children:"Categories"}),R(Ke,{css:_i,to:Ju,children:"Suppliers"})]}),_i={name:"1xgomty",styles:"padding:10px 15px;border-bottom:1px solid var(--border-color);font-size:14px;color:var(--foreground-color-inverse);text-decoration:none"},Gw={name:"1fttcpj",styles:"display:flex;flex-direction:column"};function Xw(){return xe("aside",{css:qw,children:[R("div",{css:Jw,children:R(Ke,{css:Zw,to:Yu,children:"back to examples"})}),R(Yw,{})]})}const Jw=[{name:"1p4wz8g",styles:"position:absolute;bottom:20px;left:15px"}],Zw={name:"1lbqjm6",styles:"font-size:14px;color:var(--foreground-color-inverse);text-decoration:none"},qw={name:"gzbxbx",styles:"background-color:var(--background-color-inverse);border-right:1px solid var(--border-color)"},eS=E.memo(Xw),tS={name:"clip-one__main-tabs",version:"4.0"};function nS(){const{router:e}=tr(),{getTabsFromStorage:t,persistTabs:n}=Hr({storage:Wr,storageKey:tS}),[r,o]=E.useState(()=>Qr(t()||[],e.routes.slice())),[i,l]=E.useState([]),[a]=E.useState(()=>[{title:()=>"Dashboard",shouldOpen:x=>x.route.path===Zu,insertAt:Gt},{title:()=>"Categories",shouldOpen:x=>x.route.path===vn,insertAt:Gt},{title:()=>"Products",shouldOpen:x=>x.route.path===Yo,insertAt:Gt},{title:()=>"Suppliers",shouldOpen:x=>x.route.path===Ju,insertAt:Gt}]),{activeTabId:s,setActiveTabId:u,getTabTitleByTabPath:f}=nr({router:e,config:a,tabs:r,onTabsChange:o,fallbackPath:Je});E.useEffect(()=>n(r),[r,n]);const c=r.map(x=>({id:x.id,content:R(er,{}),title:f(x.path),isClosable:!0}));return xe("div",{css:oS,children:[R("header",{css:lS,children:"John Doe"}),xe("div",{css:rS,children:[R(eS,{}),R("div",{css:iS,children:R("div",{css:aS,children:R(ql,{tabs:c,onTabsChange:x=>{o(x.map(g=>{const y=r.find(k=>k.id===g.id);return{id:g.id,route:y.route,path:y.path}}))},onStartPinnedTabsChange:l,startPinnedTabs:i,initialActiveTabId:s,initialTabs:c,initialStartPinnedTabs:i,hasControlledActiveTabId:!0,activeTabId:s,onActiveTabIdChange:u})})})]})]})}const rS={name:"1ohy2wd",styles:"flex-grow:1;width:100%;display:grid;grid-template-columns:225px 1fr"},oS={name:"dewh7u",styles:"--border-color:rgba(221, 221, 221);--border-color-inverse:rgb(85, 85, 85);--color-primary:#569099;--header-height:42px;--background-color-inverse:rgb(245, 245, 245);--foreground-color-inverse:rgb(85, 85, 85);box-sizing:border-box;min-height:100vh;display:flex;flex-direction:column"},iS={name:"1fttcpj",styles:"display:flex;flex-direction:column"},lS={name:"1kvzxno",styles:"height:var(--header-height);border-bottom:1px solid var(--border-color);background-color:var(--background-color-inverse);display:flex;align-items:center;padding:0 16px;justify-content:end"},aS={name:"1kqp5b1",styles:"padding:10px;flex-grow:1;display:flex;flex-direction:column"};function sS(){return R("div",{children:"dashboard"})}const uS=[{path:Yo,element:R(Iw,{}),children:[{index:!0,element:R(Ow,{})},{path:Gu,element:R(bw,{})},{path:Bn,element:R(Aw,{}),children:[{index:!0,element:R(Uw,{})},{path:ho,element:R(jw,{})}]}]}],cS=[{path:vn,element:R(Vw,{}),children:[{index:!0,element:R(Hw,{})},{path:Xu,element:R(Qw,{})}]}],dS=[{path:Ju,element:R(Kw,{})}],fS={path:Zu,element:R(sS,{})},pS=[{path:Je,element:R(nS,{}),children:[{index:!0,element:R(gw,{})},fS,...uS,...cS,...dS]}],hS=f1([{path:Yu,element:R(P1,{})},...vw,...pS]);function mS(){return R(x1,{router:hS})}Ba.createRoot(document.getElementById("root")).render(R(hf.StrictMode,{children:R(mS,{})})); diff --git a/index.html b/index.html index a8e09c0..93e38cb 100644 --- a/index.html +++ b/index.html @@ -19,7 +19,7 @@ } })(window.location); - +