1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[9502],{14469:function(e,s,t){(window.__NEXT_P=window.__NEXT_P||[]).push(["/design-system/emptystates",function(){return t(5816)}])},5816:function(e,s,t){"use strict";t.r(s);var a=t(85893),i=(t(67294),t(13494)),n=function(){return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)("h1",{className:"mb-2",children:"Empty states"}),(0,a.jsxs)("div",{className:"mb-12",id:"structure",children:[(0,a.jsx)("h2",{className:"h3 mb-3",children:"Structure"}),(0,a.jsx)("div",{className:"surface rounded-lg px-4 py-8 text-center",children:(0,a.jsxs)("div",{className:"max-w-xs mx-auto",children:[(0,a.jsx)("span",{className:"icon icon-brawl text-6xl text-ui-500"}),(0,a.jsxs)("div",{className:"mt-2 mb-6",children:[(0,a.jsx)("p",{className:"text-sm text-ui-400",children:"You have no active Brawl"}),(0,a.jsx)("p",{className:"text-lg text-ui-300",children:"Click the button to browse available Brawls"})]}),(0,a.jsx)("button",{type:"button",className:"button button-primary",children:(0,a.jsx)("span",{children:"Browse Brawls"})})]})}),(0,a.jsx)("div",{className:"mt-4",children:(0,a.jsx)("iframe",{className:"rounded",width:"100%",height:"300",src:"//jsfiddle.net/augustin_hiebel/a614r7Ly/embedded/html/dark/?bodyColor=333366&menuColor=1F1F42&fontColor=FFFFFF&accentColor=13F094"})})]}),(0,a.jsxs)("div",{className:"mb-12",id:"with-skip-button",children:[(0,a.jsx)("h2",{className:"h3 mb-3",children:"With skip button"}),(0,a.jsx)("div",{className:"surface rounded-lg px-4 py-8 text-center",children:(0,a.jsxs)("div",{className:"max-w-xs mx-auto",children:[(0,a.jsx)("span",{className:"icon icon-smile text-6xl text-ui-500"}),(0,a.jsxs)("div",{className:"mt-2 mb-6",children:[(0,a.jsx)("p",{className:"text-sm text-ui-400",children:"You\u2018ve successfully signed up"}),(0,a.jsx)("p",{className:"text-lg text-ui-300",children:"Click the button to invite your friends"})]}),(0,a.jsx)("button",{type:"button",className:"button button-main",children:(0,a.jsx)("span",{children:"Invite your friends"})}),(0,a.jsx)("div",{className:"mt-4",children:(0,a.jsx)("a",{className:"text-interaction-500 hover:interaction-300",href:"#",children:"Skip"})})]})}),(0,a.jsx)("div",{className:"mt-4",children:(0,a.jsx)("iframe",{className:"rounded",width:"100%",height:"300",src:"//jsfiddle.net/augustin_hiebel/1j4ak6o3/embedded/html/dark/?bodyColor=333366&menuColor=1F1F42&fontColor=FFFFFF&accentColor=13F094"})})]}),(0,a.jsxs)("div",{className:"mb-12",id:"with-input",children:[(0,a.jsx)("h2",{className:"h3 mb-3",children:"With input"}),(0,a.jsx)("div",{className:"surface rounded-lg px-4 py-8 text-center",children:(0,a.jsxs)("div",{className:"max-w-xs mx-auto",children:[(0,a.jsx)("span",{className:"icon icon-manga-63 text-6xl text-ui-500"}),(0,a.jsxs)("div",{className:"mt-2 mb-6",children:[(0,a.jsx)("p",{className:"text-sm text-ui-400",children:"You are not following anyone"}),(0,a.jsx)("p",{className:"text-lg text-ui-300",children:"Start to meet new friends"})]}),(0,a.jsx)("div",{className:"form-group",children:(0,a.jsxs)("div",{className:"input-group",children:[(0,a.jsx)("button",{type:"button",className:"button button-primary",children:(0,a.jsx)("span",{children:"Search"})}),(0,a.jsx)("input",{type:"text",name:"search-friends",id:"search-friends"})]})})]})}),(0,a.jsx)("div",{className:"mt-4",children:(0,a.jsx)("iframe",{className:"rounded",width:"100%",height:"300",src:"//jsfiddle.net/augustin_hiebel/dtsabyvx/embedded/html/dark/?bodyColor=333366&menuColor=1F1F42&fontColor=FFFFFF&accentColor=13F094"})})]}),(0,a.jsxs)("div",{className:"mb-12",id:"with-image",children:[(0,a.jsx)("h2",{className:"h3 mb-3",children:"With image"}),(0,a.jsx)("div",{className:"surface rounded-lg px-4 py-8 text-center",children:(0,a.jsxs)("div",{className:"max-w-xs mx-auto",children:[(0,a.jsx)("img",{className:"mx-auto",src:"https://res.cloudinary.com/gloot/image/upload/v1659691391/Marketing/2022_prototype/Decoration-chat.webp",width:"220",height:"auto",alt:""}),(0,a.jsxs)("div",{className:"mt-2 mb-6",children:[(0,a.jsx)("p",{className:"text-sm text-ui-400",children:"Chat with your clan"}),(0,a.jsx)("p",{className:"text-lg text-ui-300",children:"Coordinate and have fun together!"})]})]})}),(0,a.jsx)("div",{className:"mt-4",children:(0,a.jsx)("iframe",{className:"rounded",width:"100%",height:"300",src:"//jsfiddle.net/augustin_hiebel/8jf0xzat/embedded/html/dark/?bodyColor=333366&menuColor=1F1F42&fontColor=FFFFFF&accentColor=13F094"})})]})]})};n.getLayout=i.G,s.default=n}},function(e){e.O(0,[1664,5797,3494,9774,2888,179],(function(){return s=14469,e(e.s=s);var s}));var s=e.O();_N_E=s}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.