https://xeenon.xyz/_next/static/chunks/pages/ui-docs-fbc3a3080225296a.js

1try{let e="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof globalThis?globalThis:"undefined"!=typeof self?self:{},t=(new e.Error).stack;t&&(e._sentryDebugIds=e._sentryDebugIds||{},e._sentryDebugIds[t]="29246dfe-a3a8-494a-815a-1a6a52669e55",e._sentryDebugIdIdentifier="sentry-dbid-29246dfe-a3a8-494a-815a-1a6a52669e55")}catch(e){}(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[7422],{8504:(e,t,n)=>{(window.__NEXT_P=window.__NEXT_P||[]).push(["/ui-docs",function(){return n(86973)}])},86973:(e,t,n)=>{"use strict";n.r(t),n.d(t,{default:()=>v});var a,s=n(31085),r=n(14041),i=n(98768),c=n(30211),o=n(9566),d=n(11062),l=n(6479),x=n(37454),u=n(87020),p=n(67173),h=n(8116),m=n(38725),y=n(26493),f=n(73718),g=n(47290),j=n(18573),M=n(78602),w=n(82395);function S(){return(S=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)({}).hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e}).apply(null,arguments)}var k=function(e){return r.createElement("svg",S({xmlns:"http://www.w3.org/2000/svg",width:24,height:24,fill:"none"},e),a||(a=r.createElement("path",{stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:1.5,d:"M11 4H6.8c-1.68 0-2.52 0-3.162.327a3 3 0 0 0-1.311 1.311C2 6.28 2 7.12 2 8.8v8.4c0 1.68 0 2.52.327 3.162a3 3 0 0 0 1.311 1.311C4.28 22 5.12 22 6.8 22h8.4c1.68 0 2.52 0 3.162-.327a3 3 0 0 0 1.311-1.311C20 19.72 20 18.88 20 17.2V13M8 16h1.675c.489 0 .733 0 .963-.055.204-.05.4-.13.579-.24.201-.123.374-.296.72-.642L21.5 5.5a2.121 2.121 0 0 0-3-3l-9.563 9.563c-.346.346-.519.519-.642.72a2 2 0 0 0-.24.579c-.055.23-.055.474-.055.963z"})))},I=n(85191);let v=()=>{let e=["h1","h2","h3","h4","h5"],t=[400,500,600,700],n="Poppins Bold",a="Lorem ipsum dolor sit amet.",S=[["lg",24,12],["md",20,10],["sm",16,8],["xs",14,4]],v={primary:[void 0],secondary:[void 0,"red","alt"],ghost:[void 0,"black","alt"],text:[void 0]},[B,C]=(0,r.useState)(S[0]),[b,O]=(0,r.useState)("primary"),[D,z]=(0,r.useState)();return(0,s.jsxs)(i.T,{align:"stretch",spacing:"32px",padding:"40px","data-sentry-element":"VStack","data-sentry-component":"DocsPage","data-sentry-source-file":"index.tsx",children:[(0,s.jsx)(c.D,{"data-sentry-element":"Heading","data-sentry-source-file":"index.tsx",children:"Typography:"}),(0,s.jsxs)(o.r,{columns:2,spacing:"16px","data-sentry-element":"SimpleGrid","data-sentry-source-file":"index.tsx",children:[(0,s.jsx)(i.T,{align:"stretch",spacing:"8px","data-sentry-element":"VStack","data-sentry-source-file":"index.tsx",children:e.map((e,t)=>(0,s.jsx)(c.D,{size:e,children:n},t))}),(0,s.jsx)(d.C,{p:"8px",whiteSpace:"pre-line","data-sentry-element":"Code","data-sentry-source-file":"index.tsx",children:e.map(e=>"<Heading size={'".concat(e,"'}>").concat(n,"</Heading>")).join("\n")})]}),(0,s.jsx)(i.T,{align:"stretch",spacing:"16px","data-sentry-element":"VStack","data-sentry-source-file":"index.tsx",children:["xl","lg","md","sm","xs"].map((e,n)=>(0,s.jsxs)(s.Fragment,{children:[(0,s.jsxs)(l.E,{borderBottom:"1px solid",borderColor:"whiteA.10",pb:"8px",children:["Text: ",e]}),(0,s.jsxs)(o.r,{columns:t.length,spacing:"32px",children:[t.map((t,n)=>(0,s.jsxs)(i.T,{align:"stretch",spacing:"8px",children:[(0,s.jsx)(l.E,{size:e,fontWeight:t,children:a}),(0,s.jsx)(d.C,{p:"8px",whiteSpace:"pre-wrap",children:"<Text size={'".concat(e,"'} fontWeight={'").concat(t,"'}>\n	").concat(a,"\n</Text>")})]},n)),t.map((t,n)=>(0,s.jsxs)(i.T,{align:"stretch",spacing:"8px",children:[(0,s.jsx)(l.E,{size:e,fontWeight:t,textDecoration:"underline",children:a}),(0,s.jsx)(d.C,{p:"8px",whiteSpace:"pre-wrap",children:"<Text size={'".concat(e,"'} fontWeight={'").concat(t,"'} textDecoration={'underline'}>\n	").concat(a,"\n</Text>")})]},n))]},n)]}))}),(0,s.jsx)(c.D,{"data-sentry-element":"Heading","data-sentry-source-file":"index.tsx",children:"Buttons:"}),(0,s.jsxs)(o.r,{columns:2,spacing:"16px","data-sentry-element":"SimpleGrid","data-sentry-source-file":"index.tsx",children:[(0,s.jsxs)(x.z,{spacing:"16px","data-sentry-element":"HStack","data-sentry-source-file":"index.tsx",children:[(0,s.jsx)(u.$,{size:B[0],variant:b,colorScheme:D,"data-sentry-element":"Button","data-sentry-source-file":"index.tsx",children:"Button"}),(0,s.jsx)(u.$,{size:B[0],variant:b,colorScheme:D,leftIcon:(0,s.jsx)(p.a,{as:k,viewBox:"0 0 24 24",boxSize:"".concat(B[

11],"px")}),"data-sentry-element":"Button","data-sentry-source-file":"index.tsx",children:"Button"}),(0,s.jsx)(u.$,{size:B[0],variant:b,colorScheme:D,rightIcon:(0,s.jsx)(p.a,{as:k,viewBox:"0 0 24 24",boxSize:"".concat(B[1],"px")}),"data-sentry-element":"Button","data-sentry-source-file":"index.tsx",children:"Button"}),(0,s.jsx)(u.$,{size:B[0],variant:b,colorScheme:D,p:"".concat(B[2],"px"),"data-sentry-element":"Button","data-sentry-source-file":"index.tsx",children:(0,s.jsx)(p.a,{as:k,viewBox:"0 0 24 24",boxSize:"".concat(B[1],"px"),"data-sentry-element":"Box","data-sentry-source-file":"index.tsx"})})]}),(0,s.jsxs)(i.T,{align:"stretch",spacing:"8px","data-sentry-element":"VStack","data-sentry-source-file":"index.tsx",children:[(0,s.jsxs)(x.z,{spacing:"16px","data-sentry-element":"HStack","data-sentry-source-file":"index.tsx",children:[(0,s.jsxs)(i.T,{align:"stretch",spacing:"8px","data-sentry-element":"VStack","data-sentry-source-file":"index.tsx",children:[(0,s.jsx)(l.E,{"data-sentry-element":"Text","data-sentry-source-file":"index.tsx",children:"Button size:"}),(0,s.jsx)(h.l,{bg:"white",onChange:e=>C(S[+e.target.value]),"data-sentry-element":"Select","data-sentry-source-file":"index.tsx",children:S.map((e,t)=>(0,s.jsx)("option",{value:t,children:e[0]},t))})]}),(0,s.jsxs)(i.T,{align:"stretch",spacing:"8px","data-sentry-element":"VStack","data-sentry-source-file":"index.tsx",children:[(0,s.jsx)(l.E,{"data-sentry-element":"Text","data-sentry-source-file":"index.tsx",children:"Button variant:"}),(0,s.jsx)(h.l,{bg:"white",onChange:e=>O(e.target.value),"data-sentry-element":"Select","data-sentry-source-file":"index.tsx",children:Object.keys(v).map((e,t)=>(0,s.jsx)("option",{value:e,children:e},t))})]}),(0,s.jsxs)(i.T,{align:"stretch",spacing:"8px","data-sentry-element":"VStack","data-sentry-source-file":"index.tsx",children:[(0,s.jsx)(l.E,{"data-sentry-element":"Text","data-sentry-source-file":"index.tsx",children:"Button color scheme:"}),(0,s.jsx)(h.l,{bg:"white",onChange:e=>z(e.target.value),"data-sentry-element":"Select","data-sentry-source-file":"index.tsx",children:v[b].map((e,t)=>(0,s.jsx)("option",{value:e,children:e||"default"},t))})]})]}),(0,s.jsxs)(d.C,{p:"8px",whiteSpace:"pre-line","data-sentry-element":"Code","data-sentry-source-file":"index.tsx",children:["import { Button } from '@chakra-ui/react';\n","import { ReactComponent as NewMessageSVG } from 'public/images/new-message.svg';\n","\n","<Button size={'".concat(B[0],"'} variant={'").concat(b,"'} colorScheme={'").concat(D,"'}>Button</Button>\n"),"\n","<Button size={'".concat(B[0],"'} variant={'").concat(b,"'} colorScheme={'").concat(D,"'} leftIcon={<Box as={NewMessageSVG} viewBox={'0 0 24 24'} boxSize={'").concat(B[1],"px'} />}>\n	Button\n</Button>\n"),"\n","<Button size={'".concat(B[0],"'} variant={'").concat(b,"'} colorScheme={'").concat(D,"'} rightIcon={<Box as={NewMessageSVG} viewBox={'0 0 24 24'} boxSize={'").concat(B[1],"px'} />}>\n	Button\n</Button>\n"),"\n","<Button size={'".concat(B[0],"'} variant={'").concat(b,"'} colorScheme={'").concat(D,"'} p={'").concat(B[2],"px'}>\n	<Box as={NewMessageSVG} viewBox={'0 0 24 24'} boxSize={'").concat(B[1],"px'} />\n</Button>")]})]})]}),(0,s.jsx)(c.D,{"data-sentry-element":"Heading","data-sentry-source-file":"index.tsx",children:"Inputs:"}),(0,s.jsxs)(o.r,{columns:2,spacing:"16px","data-sentry-element":"SimpleGrid","data-sentry-source-file":"index.tsx",children:[(0,s.jsx)(m.p,{placeholder:"Search","data-sentry-element":"Input","data-sentry-source-file":"index.tsx"}),(0,s.jsxs)(d.C,{p:"8px",whiteSpace:"pre-line","data-sentry-element":"Code","data-sentry-source-file":"index.tsx",children:["import { Input } from '@chakra-ui/react';\n\n","<Input placeholder={'Search'} />"]}),(0,s.jsx)(m.p,{placeholder:"Search",isInvalid:!0,"data-sentry-element":"Input","data-sentry-source-file":"index.tsx"}),(0,s.jsxs)(d.C,{p:"8px",whiteSpace:"pre-line","data-sentry-element":"Code","data-sentry-source-file":"index.tsx",children:["import { Input } from '@chakra-ui/react';\n\n","<Input placeholder={'Search'} isInvalid={true} />"]})]}),(0,s.jsx)(c.D,{"data-sentry-element":"Heading","data-sentry-source-file":"index.tsx",children:"Dropdowns:"}),(0,s.jsxs)(o.r,{columns:2,spacing:"16px","data-sentry-element":"SimpleGrid","data-sentry-source-file":"index.tsx",children:[(0,s.jsx)(p.a,{"data-sentry-element":"Box","data-sentry-source-file":"index.tsx",children:(0,s.jsxs)(y.W,{"data-sentry-element":"Menu","data-sentry-source-file":"index.tsx",children:[(0,s.jsx)(f.I,{w:"fit-content","data-sentry-element":"MenuButton","data-sentry-source-file":"index.tsx",children:"Simple dropdown"}),(0,s.jsxs)(g.c,{"data-sentry-element":"MenuList","data-sentry-source-file":"index.tsx",children:[(0,s.jsx)(j.D,{"data-sentry-element":"MenuItem","data-sentry-source-file":"index.tsx",children:"Download"}),(0,s.jsx)(j.D,{"data-sentry-element":"MenuItem","data-sentry-source-file":"index.tsx",children:"Create a Copy"}),(0,s.jsx)(j.D,{"data-sentry-element":"MenuItem","data-sentry-source-file":"index.tsx",children:"Mark as Draft"}),(0,s.jsx)(j.D,{"data-sentry-element":"MenuItem","data-sentry-source-file":"index.tsx",children:"Delete"}),(0,s.jsx)(j.D,{"data-sentry-element":"MenuItem","data-sentry-source-file":"index.tsx",children:"Attend a Workshop"})]})]})}),(0,s.jsxs)(d.C,{p:"8px",whiteSpace:"pre-wrap","data-sentry-element":"Code","data-sentry-source-file":"index.tsx",children:["import { Menu, MenuButton, MenuList, MenuItem } from '@chakra-ui/react';\n\n","\n<Menu>\n  <MenuButton w={'fit-content'}>\n    Simple dropdown\n  </MenuButton>\n  <MenuList>\n    <MenuItem>Download</MenuItem>\n    <MenuItem>Create a Copy</MenuItem>\n    <MenuItem>Mark as Draft</MenuItem>\n    <MenuItem>Delete</MenuItem>\n    <MenuItem>Attend a Workshop</MenuItem>\n  </MenuList>\n</Menu>\n          "]}),(0,s.jsx)(p.a,{"data-sentry-element":"Box","data-sentry-source-file":"index.tsx",children:(0,s.jsxs)(y.W,{"data-sentry-element":"Menu","data-sentry-source-file":"index.tsx",children:[(0,s.jsx)(f.I,{w:"fit-content","data-sentry-element":"MenuButton","data-sentry-source-file":"index.tsx",children:"Dropdown with groups"}),(0,s.jsxs)(g.c,{"data-sentry-element":"MenuList","data-sentry-source-file":"index.tsx",children:[(0,s.jsxs)(M.i,{defaultValue:"asc",title:"Order",type:"radio","data-sentry-element":"MenuOptionGroup","data-sentry-source-file":"index.tsx",children:[(0,s.jsx)(w.k,{value:"asc",icon:(0,s.jsx)(I.h,{}),"data-sentry-element":"MenuItemOption","data-sentry-source-file":"index.tsx",children:"Ascending"}),(0,s.jsx)(w.k,{value:"desc",icon:(0,s.jsx)(I.h,{}),"data-sentry-element":"MenuItemOption","data-sentry-source-file":"index.tsx",children:"Descending"})]}),(0,s.jsxs)(M.i,{title:"Country",type:"checkbox","data-sentry-element":"MenuOptionGroup","data-sentry-source-file":"index.tsx",children:[(0,s.jsx)(w.k,{value:"email",icon:(0,s.jsx)(I.h,{}),"data-sentry-element":"MenuItemOption","data-sentry-source-file":"index.tsx",children:"Email"}),(0,s.jsx)(w.k,{value:"phone",icon:(0,s.jsx)(I.h,{}),"data-sentry-element":"MenuItemOption","data-sentry-source-file":"index.tsx",children:"Phone"}),(0,s.jsx)(w.k,{value:"country",icon:(0,s.jsx)(I.h,{}),"data-sentry-element":"MenuItemOption","data-sentry-source-file":"index.tsx",children:"Country"})]})]})]})}),(0,s.jsxs)(d.C,{p:"8px",whiteSpace:"pre-wrap","data-sentry-element":"Code","data-sentry-source-file":"index.tsx",children:["import { Menu, MenuButton, MenuList, MenuOptionGroup, MenuItemOption } from '@chakra-ui/react';\n","import { ReactComponent as CheckmarkSVG } from 'public/images/checkmark.svg'\n\n","\n<Menu>\n  <MenuButton w={'fit-content'}>\n    Dropdown with groups\n  </MenuButton>\n  <MenuList>\n    <MenuOptionGroup defaultValue='asc' title='Order' type='radio'>\n      <MenuItemOption value='asc' icon={<CheckmarkSVG />}>\n        Ascending\n      </MenuItemOption>\n      <MenuItemOption value='desc' icon={<CheckmarkSVG />}>\n        Descending\n      </MenuItemOption>\n    </MenuOptionGroup>\n    <MenuOptionGroup title='Country' type='checkbox'>\n      <MenuItemOption value='email' icon={<CheckmarkSVG />}>Email</MenuItemOption>\n      <MenuItemOption value='phone' icon={<CheckmarkSVG />}>Phone</MenuItemOption>\n      <MenuItemOption value='country' icon={<CheckmarkSVG />}>Country</MenuItemOption>\n    </MenuOptionGroup>\n  </MenuList>\n</Menu>\n          "]})]})]})}}

1,11062:(e,t,n)=>{"use strict";n.d(t,{C:()=>d});var a=n(31085),s=n(41015),r=n(77031),i=n(60645),c=n(26818),o=n(10453);let d=(0,i.R)(function(e,t){let n=(0,c.V)("Code",e),{className:i,...d}=(0,s.M)(e);return(0,a.jsx)(o.B.code,{ref:t,className:(0,r.cx)("chakra-code",e.className),...d,__css:{display:"inline-block",...n}})});d.displayName="Code"}},e=>{var t=t=>e(e.s=t);e.O(0,[636,6593,8792],()=>t(8504)),_N_E=e.O()}]);