1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[3900],{66166:function(s,e,r){(window.__NEXT_P=window.__NEXT_P||[]).push(["/docs/about",function(){return r(65791)}])},92346:function(s,e,r){"use strict";r.d(e,{Z:function(){return c},o:function(){return h}});var n=r(11527),i=r(45924),l=r(44970),o=r.n(l),t=r(55349),a=r.n(t);function c(s){let{children:e,title:r,icon:l,image:t,arrow:c,demo:h,href:x,...d}=s,p=c?(0,n.jsx)("span",{className:(0,i.Z)("transition-transform duration-75","group-hover:translate-x-[2px]"),children:"â"}):null;return t?(0,n.jsxs)(o(),{href:x,className:(0,i.Z)(a().card,"group flex flex-col justify-start overflow-hidden rounded-lg border border-gray-200 bg-gray-100 text-current no-underline shadow shadow-gray-100 transition-all duration-200 dark:border-neutral-700 dark:bg-neutral-800 dark:text-gray-50 dark:shadow-none","hover:border-gray-300 hover:shadow-lg hover:shadow-gray-100 dark:hover:border-neutral-500 dark:hover:bg-neutral-700 dark:hover:shadow-none","active:shadow-sm active:shadow-gray-200"),...d,children:[e,(0,n.jsxs)("span",{className:(0,i.Z)(a().title,"gap-2 p-4 text-gray-700 dark:text-gray-300","hover:text-gray-900 dark:hover:text-gray-100"),children:[l,(0,n.jsxs)("span",{className:"flex gap-1",children:[r,p]})]})]}):(0,n.jsx)(o(),{href:x,className:(0,i.Z)(a().card,"group flex flex-col justify-start overflow-hidden rounded-lg border border-gray-200 bg-transparent text-current no-underline shadow-sm shadow-gray-100 transition-all duration-200 dark:border-neutral-800 dark:shadow-none","hover:border-gray-300 hover:bg-slate-50 hover:shadow-md hover:shadow-gray-100 dark:hover:border-neutral-700 dark:hover:bg-neutral-900 dark:hover:shadow-none","active:shadow-sm active:shadow-gray-200"),...d,children:(0,n.jsxs)("span",{className:(0,i.Z)(a().title,"gap-2 p-4 text-gray-700 dark:text-neutral-200","hover:text-gray-900 dark:hover:text-neutral-50"),children:[l,r,p]})})}function h(s){let{children:e,num:r,...l}=s;return(0,n.jsx)("div",{className:(0,i.Z)(a().cards,"mt-4 gap-4"),...l,style:{"--rows":r||3,...l.style},children:e})}},7704:function(s,e,r){"use strict";var n=r(11527);e.Z=(0,n.jsx)("svg",{viewBox:"0 0 24 24",children:(0,n.jsx)("path",{fill:"currentColor",d:"M7 18q-2.5 0-4.25-1.75T1 12q0-2.5 1.75-4.25T7 6h10q2.5 0 4.25 1.75T23 12q0 2.5-1.75 4.25T17 18Zm0-2h10q1.65 0 2.825-1.175Q21 13.65 21 12q0-1.65-1.175-2.825Q18.65 8 17 8H7Q5.35 8 4.175 9.175Q3 10.35 3 12q0 1.65 1.175 2.825Q5.35 16 7 16Zm0-1q1.25 0 2.125-.875T10 12q0-1.25-.875-2.125T7 9q-1.25 0-2.125.875T4 12q0 1.25.875 2.125T7 15Zm5-3Z"})})},65791:function(s,e,r){"use strict";r.r(e),r.d(e,{Counter:function(){return A},Stars:function(){return L},__N_SSG:function(){return S},default:function(){return T}});var n=r(11527),i=r(32033),l=r.n(i),o=r(83850),t=r(51024),a=r(14291);r(38706),r(53127);var c=r(26736),h=r(42737),x=r.n(h),d={src:"/_next/static/media/docs-theme.fbd25b85.png",height:1574,width:2800,blurDataURL:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAMAAACEE47CAAAACVBMVEX8/P339/nt7vH8XCCIAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAHklEQVR4nCWIwQ0AAAxEsP/QzaUPIcAAR7rQ904JBwGhABi0Z2BZAAAAAElFTkSuQmCC",blurWidth:8,blurHeight:4},p={src:"/_next/static/media/blog-theme.56ff2f82.png",height:1574,width:2800,blurDataURL:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAMAAACEE47CAAAACVBMVEX8/Pzw8PHq6uwyn1AjAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAE0lEQVR4nGNgYGBkgAImOAsVAAAAjAAFYabwQwAAAABJRU5ErkJggg==",blurWidth:8,blurHeight:4},k={src:"/_next/static/media/[email protected]",height:1034,width:1671,blurDataURL:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAFCAMAAABPT11nAAAANlBMVEXx8fF/f39MaXE2NjsMEBX6+voMDxTZ2dny8vI3OT7i4uILDRENERb9/f319fX4+Pj9/f0zMznfadMZAAAAD3RSTlP9DADIxJHTNpH+HoWHkJHPXXGJAAAACXBIWXMAAAsTAAALEwEAmpwYAAAALklEQVR4nB3BARIAEAgEwEu4ClP+/1kzdtHW7H3uBtHr7iogPoKVmVVEDDMbJx4WCAEgC/iSXQAAAABJRU5ErkJggg==",blurWidth:8,blurHeight:5},j=r(44970),y=r.n(j),v=r(92346),g=(0,n.jsx)("svg",{viewBox:"0 0 24 24",children:(0,n.jsx)("path",{fill:"currentColor",d:"M20.56 18H3.44C2.65 18 2 17.37 2 16.59V7.41C2 6.63 2.65 6 3.44 6h17.12c.79 0 1.44.63 1.44 1.41v9.18c0 .78-.65 1.41-1.44 1.41M6.81 15.19v-3.66l1.92 2.35l1.92-2.35v3.66h1.93V8.81h-1.93l-1.92 2.35l-1.92-2.35H4.89v6.38h1.92M19.69 12h-1.92V8.81h-1.92V12h-1.93l2.89 3.28L19.69 12Z"})}),m=(0,n.jsx)("svg",{viewBox:"0 0 24 24",children:(0,n.jsx)("path",{fill:"none",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"2",d:"M21 12a9 9 0 0 1-9 9m9-9a9 9 0 0 0-9-9m9 9H3m9 9a9 9 0 0 1-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 0 1 9-9"})}),u=r(7704),f=r(40485),w=r(50959),N=r(10422);class b extends w.Component{componentDidMount(){this.shadowAttached||(this.shadowAttached=!0,this.shadowRoot=this.node.attachShadow({mode:this.props.mode}),this.forceUpdate())}render(){let{children:s,...e}=this.props;return(0,n.jsx)("div",{...e,ref:s=>this.node=s,children:this.shadowRoot&&(0,N.createPortal)(s,this.shadowRoot)})}}var C=r(65192);function M(s){let{options:e}=s;return(0,n.jsx)("div",{className:"mt-6 mb-4 overflow-x-auto overscroll-x-contain pb-4",children:(0,n.jsxs)("table",{className:"w-full border-collapse text-sm",children:[(0,n.jsx)("thead",{children:(0,n.jsxs)("tr",{className:"dark:border-primary-100/10 border-b py-4 text-left",children:[(0,n.jsx)("th",{className:"py-2 font-semibold",children:"Option"}),(0,n.jsx)("th",{className:"py-2 pl-6 font-semibold",children:"Type"}),(0,n.jsx)("th",{className:"py-2 px-6 font-semibold",children:"Description"})]})}),(0,n.jsx)("tbody",{className:"align-baseline text-gray-900 dark:text-gray-100",children:e.map(s=>{let[e,r,i]=s;return(0,n.jsxs)("tr",{className:"border-b border-gray-100 dark:border-zinc-800/50",children:[(0,n.jsx)("td",{className:"whitespace-pre py-2 font-mono text-xs font-semibold leading-6 text-violet-600 dar
1k:text-violet-500",children:e}),(0,n.jsx)("td",{className:"whitespace-pre py-2 pl-6 font-mono text-xs font-semibold leading-6 text-slate-500 dark:text-slate-400",children:r}),(0,n.jsx)("td",{className:"py-2 pl-6",children:i})]},e)})})]})})}let P={MDXContent:function(){let s=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:e}=Object.assign({},(0,c.ah)(),s.components);return e?(0,n.jsx)(e,{...s,children:(0,n.jsx)(D,{...s})}):D(s)},pageOpts:{filePath:"pages/docs/about.mdx",route:"/docs/about",headings:[{depth:1,value:"CodeXam Website Setup",id:"codexam-website-setup"},{depth:2,value:"a. Card",id:"a-card"},{depth:2,value:"b. FAQ Section",id:"b-faq-section"},{depth:2,value:"c. <figurecaption> Tag",id:"c-figurecaption-tag"},{depth:2,value:"d. Default Behavior",id:"d-default-behavior"},{depth:3,value:"meta.json",id:"metajson"},{depth:2,value:"e. Different SVG Card",id:"e-different-svg-card"},{depth:2,value:"f. Markdown",id:"f-markdown"},{depth:3,value:"Text",id:"text"},{depth:4,value:"Middle Heading with CSS",id:"middle-heading-with-css"},{depth:3,value:"MDX with React Components",id:"mdx-with-react-components"},{depth:3,value:"GitHub Flavored Markdown",id:"github-flavored-markdown"},{depth:4,value:"Strikethrough",id:"strikethrough"},{depth:4,value:"Task List",id:"task-list"},{depth:3,value:"Table",id:"table"},{depth:3,value:"Autolinks",id:"autolinks"},{depth:3,value:"Custom Table Feature",id:"custom-table-feature"},{depth:3,value:"Code Block",id:"code-block"},{depth:4,value:"Extended Syntax Highlighting",id:"extended-syntax-highlighting"},{depth:4,value:"File type in code blocks",id:"file-type-in-code-blocks"},{depth:4,value:"Tab Groups in code blocks",id:"tab-groups-in-code-blocks"},{depth:4,value:"Highlight in code blocks",id:"highlight-in-code-blocks"},{depth:2,value:"g. Nextjs SSG",id:"g-nextjs-ssg"},{depth:3,value:"Repo Star Count",id:"repo-star-count"},{depth:2,value:"h. Nextjs I18n",id:"h-nextjs-i18n"},{depth:3,value:"next.config.mjs",id:"nextconfigmjs"},{depth:3,value:"language dropdown:",id:"language-dropdown"},{depth:2,value:"i. Nextjs Image",id:"i-nextjs-image"},{depth:3,value:"Import Image from folder",id:"import-image-from-folder"},{depth:3,value:"Image Using Link",id:"image-using-link"},{depth:3,value:"Image imports with the Markdown syntax",id:"image-imports-with-the-markdown-syntax"},{depth:3,value:"Image with Border",id:"image-with-border"},{depth:2,value:"j. Step Design for Guide",id:"j-step-design-for-guide"},{depth:3,value:"Install",id:"install"},{depth:3,value:"Create Config",id:"create--config"},{depth:3,value:"Create Docs Theme Config",id:"create-docs-theme-config"},{depth:3,value:"Ready to Go!",id:"ready-to-go"},{depth:2,value:"k. Theme Configuration",id:"k-theme-configuration"},{depth:3,value:"Project Link",id:"project-link"},{depth:4,value:"Use a custom icon",id:"use-a-custom-icon"},{depth:3,value:"Chat Link",id:"chat-link"},{depth:4,value:"Customize chat link",id:"customize-chat-link"},{depth:3,value:"Banner",id:"banner"},{depth:4,value:"Banner key",id:"banner-key"},{depth:3,value:"Navigation",id:"navigation"},{depth:3,value:"Head",id:"head"},{depth:3,value:"Static head tags",id:"static-head-tags"},{depth:4,value:"Render Open Graph tags",id:"render-open-graph-tags"},{depth:3,value:"Sidebar",id:"sidebar"},{depth:3,value:"Title",id:"title"},{depth:3,value:"Footer",id:"footer"},{depth:4,value:"Copyright information",id:"copyright-information"},{depth:3,value:"Edit Link",id:"edit-link"},{depth:3,value:"Feedback Link",id:"feedback-link"},{depth:3,value:"Logo",id:"logo"},{depth:3,value:"Table of Contents",id:"table-of-contents"},{depth:4,value:"Floating TOC",id:"floating-toc"},{depth:3,value:"Extra Content",id:"extra-content"},{depth:3,value:"MDX Components",id:"mdx-components"},{depth:3,value:"Writing Direction",id:"writing-direction"},{depth:3,value:"Docs Repository",id:"docs-repository"},{depth:4,value:"Specify path",id:"specify-path"},{depth:3,value:"Last Updated Date",id:"last-updated-date"},{depth:4,value:"I18n",id:"i18n"},{depth:4,value:"Navbar",id:"navbar"},{depth:4,value:"Dark Mode and Themes",id:"dark-mode-and-themes"},{depth:4,value:"Theme Color",id:"theme-color"},{depth:4,value:"Error Pages",id:"error-pages"},{depth:4,value:"404 - Not Found",id:"404---not-found"},{depth:4,value:"500 - Internal Server Error",id:"500---internal-server-error"},{depth:4,value:"Search",id:"search"},{depth:3,value:"Favicon Glyph (Experimental)",id:"favicon-glyph-experimental"}
1,{depth:2,value:"l. Bleed",id:"l-bleed"},{depth:3,value:"Video with Rounded Corners",id:"video-with-rounded-corners"},{depth:2,value:"m. Callout Component",id:"m-callout-component"},{depth:3,value:"Example",id:"example"},{depth:3,value:"Usage",id:"usage"},{depth:4,value:"Default",id:"default"},{depth:4,value:"Info",id:"info"},{depth:4,value:"Warning",id:"warning"},{depth:4,value:"Error",id:"error"},{depth:3,value:"API",id:"api"},{depth:4,value:"type (optional)",id:"type-optional"},{depth:4,value:"emoji (optional)",id:"emoji-optional"},{depth:4,value:"children (optional)",id:"children-optional"},{depth:2,value:"n. Contact Us",id:"n-contact-us"},{depth:3,value:"Type 1",id:"type-1"},{depth:3,value:"Type 2",id:"type-2"},{depth:3,value:"Follow us on Social Media",id:"follow-us-on-social-media"},{depth:2,value:"o. Border around the code",id:"o-border-around-the-code"},{depth:3,value:"Type 1",id:"type-1-1"},{depth:3,value:"Type 2",id:"type-2-1"},{depth:3,value:"Type 3",id:"type-3"},{depth:3,value:"Type 4",id:"type-4"},{depth:3,value:"Type 5",id:"type-5"},{depth:2,value:"p. White Table Custom Tailwind CSS",id:"p-white-table-custom-tailwind-css"},{depth:3,value:"Type 1",id:"type-1-2"},{depth:3,value:"Type 2",id:"type-2-2"}],pageMap:[{kind:"Meta",data:{index:{title:"CodeXam",type:"page",display:"hidden",theme:{layout:"raw"}},playground:{title:"Playground",type:"page",theme:{toc:!1,layout:"raw",footer
1:!1}},showcase:{title:"Guide",type:"page",theme:{toc:!0}},xamdoc:{title:"Documentation",type:"page",theme:{toc:!0},items:{CXBS:{title:"CodeXam Blog Setup",href:"/xamdoc"},"Front Page":{title:"Front Page"}}},docs:{title:"Tutorial",type:"page",theme:{toc:!0}},xamdev:{title:"Writer's Space",type:"page",theme:{toc:!0}},faq:{title:"FAQ",type:"menu",items:{about:{title:"About CodeXam",href:"/docs/about"},community:{title:"Community"},soonmsz:{title:"Short Message",type:"/docs/soonmsz",display:"hidden"}}},confirm:"Confirm"}},{kind:"MdxPage",name:"confirm",route:"/confirm"},{kind:"Folder",name:"docs",route:"/docs",children:[{kind:"Folder",name:"DSA",route:"/docs/DSA",children:[{kind:"Meta",data:{erb:"Roadmap",dsr:"DataStructures Introduction",arr:"Array Data Structure",llds:"Linked List Data Structure"}},{kind:"MdxPage",name:"arr",route:"/docs/DSA/arr"},{kind:"MdxPage",name:"dsr",route:"/docs/DSA/dsr"},{kind:"MdxPage",name:"erb",route:"/docs/DSA/erb"},{kind:"MdxPage",name:"llds",route:"/docs/DSA/llds"}]},{kind:"MdxPage",name:"DSA",route:"/docs/DSA"},{kind:"Folder",name:"Hooks",route:"/docs/Hooks",children:[{kind:"Folder",name:"React",route:"/docs/Hooks/React",children:[{kind:"Meta",data:{useState:"useState",useEffect:"Useeffect"}},{kind:"MdxPage",name:"useEffect",route:"/docs/Hooks/React/useEffect"},{kind:"MdxPage",name:"useState",route:"/docs/Hooks/React/useState"}]},{kind:"MdxPage",name:"React",route:"/docs/Hooks/React"},{kind:"Meta",data:{React:"React"}}]},{kind:"MdxPage",name:"Hooks",route:"/docs/Hooks"},{kind:"Folder",name:"OopsJava",route:"/docs/OopsJava",children:[{kind:"Meta",data:{java0:"Hand Written Small Notes",java1:"Introduction Of OOPs",java2:"Basic Terminology"}},{kind:"MdxPage",name:"java0",route:"/docs/OopsJava/java0"},{kind:"MdxPage",name:"java1",route:"/docs/OopsJava/java1"},{kind:"MdxPage",name:"java2",route:"/docs/OopsJava/java2"}]},{kind:"MdxPage",name:"OopsJava",route:"/docs/OopsJava"},{kind:"Meta",data:{index:{title:"Video Tutorial",type:"page",theme:{typesetting:"article",layout:"full"}},"-- DSA --":{type:"separator",title:"Data Structures and Algorithms"},DSA:"Java,C++,Python & C","-- OOPs --":{type:"separator",title:"Object Oriented Programming"},OopsJava:"Java","-- Coding Practice --":{type:"separator",title:"Coding Practice"},leetcode:"Leetcode","-- DBMS --":{type:"separator",title:"Database Management System"},dbms:"DBMS","-- Machine Learning --":{type:"separator",title:"Machine Learning"},machinelearning:"Machine Learning Theory","-- Cyber Security --":{type:"separator",title:"Cyber Security"},cybersecurity:"Cyber Security","-- WebDev & AppDev --":{type:"separator",title:"Web & App Development"},html:"HTML Tutorial",tailwindcss:"Tailwind CSS Tutorial",js:"JavaScript Tutorial",react:"React Tutorial",reactnative:"React NativeTutorial",next:"Next.js Tutorial",Hooks:"React/Next Hooks",node:"Node.js Tutorial",docker:"Docker Tutorial","-- Projects --":{type:"separator",title:"Project Based Coaching"},project:"Project Tutorial","-- About --":{type:"separator",title:"Advance"},about:"CodeXam Website Project",soonmsz:"Message",exp:"Experiment"}},{kind:"MdxPage",name:"about",route:"/docs/about"},{kind:"Folder",name:"cybersecurity",route:"/docs/cybersecurity",children:[{kind:"Meta",data:{mod1:"Introduction To CyberSecurity"}},{kind:"MdxPage",name:"mod1",route:"/docs/cybersecurity/mod1"}]},{kind:"MdxPage",name:"cybersecurity",route:"/docs/cybersecurity"},{kind:"Folder",name:"dbms",route:"/docs/dbms",children:[{kind:"Meta",data:{dbms1:"Introduction",dbms2:"DBMS Architecture",dbms3:"ER Model",dbms4:"Extended ER Features",dbms5:"Banking System ER"}},{kind:"MdxPage",name:"dbms1",route:"/docs/dbms/dbms1"},{kind:"MdxPage",name:"dbms2",route:"/docs/dbms/dbms2"},{kind:"MdxPage",name:"dbms3",route:"/docs/dbms/dbms3"},{kind:"MdxPage",name:"dbms4",route:"/docs/dbms/dbms4"},{kind:"MdxPage",name:"dbms5",route:"/docs/dbms/dbms5"}]},{kind:"MdxPage",name:"dbms",route:"/docs/dbms"},{kind:"MdxPage",name:"docker",route:"/docs/docker"},{kind:"MdxPage",name:"exp",route:"/docs/exp"},{kind:"Folder",name:"html",route:"/docs/html",children:[{kind:"Meta",data:{cheatsheet:"HTML Cheatsheet",chapter1:"Html Basics"}},{kind:"MdxPage",name:"chapter1",route:"/docs/html/chapter1"},{kind:"MdxPage",name:"cheatsheet",route:"/docs/html/cheatsheet"}]},{kind:"MdxPage",name:"html",route:"/docs/html"},{kind:"MdxPage",name:"index",route:"/docs"},{kind:"Folder",name:"js",route:"/docs/js",children:[{kind:"Meta",data:{js1:"Unknown Facts",js2:"Setup Guide",js3:"Our IDE Use Guide",js4:"Variables And DataTypes",js5:"Primitives and Objects",js6:"Revision 1 ",js7:"Operators & Expressions",js8:"Comments Out",js9:"Prompt & Alert",js10:"Conditional Statements",js11:"Switch Statement",js12:"Ternary Operator",js13:"Revision 2",js14:"Loops in JavaScript",js15:"For Loop",js16:"While Loop",js17:"Do While Loop",js18:"Functions",js19:"Revision 3",js20:"Strings",js21:"String Methods",js22:"Escape Characters",js23:"Revision 4",js24:"Arrays",js25:"Array Methods",js26:"Revision 5"}},{kind:"MdxPage",name:"js1",route:"/docs/js/js1"},{kind:"MdxPage",name:"js10",route:"/docs/js/js10"},{kind:"MdxPage",name:"js11",route:"/docs/js/js11"},{kind:"MdxPage",name:"js12",route:"/docs/js/js12"},{kind:"MdxPage",name:"js13",route:"/docs/js/js13"},{kind:"MdxPage",name:"js14",route:"/docs/js/js14"},{kind:"MdxPage",name:"js15",route:"/docs/js/js15"},{kind:"MdxPage",name:"js16",route:"/docs/js/js16"},{kind:"MdxPage",name:"js17",route:"/docs/js/js17"},{kind:"MdxPage",name:"js18",route:"/docs/js/js18"},{kind:"MdxPage",name:"js19",route:"/docs/js/js19"},{kind:"MdxPage",name:"js2",route:"/docs/js/js2"},{kind:"MdxPage",name:"js20",route:"/docs/js/js20"},{kind:"MdxPage",name:"js21",route:"/docs/js/js21"},{kind:"MdxPage",name:"js22",route:"/docs/js/js22"},{kind:"MdxPage",name:"js23",route:"/docs/js/js23"},{kind:"MdxPage",name:"js24",route:"/docs/js/js24"},{kind:"MdxPage",name:"js25",route:"/docs/js/js25"},{kind:"MdxPage",name:"js26",route:"/docs/js/js26"},{kind:"MdxPage",name:"js3",route:"/docs/js/js3"},{kind:"MdxPage",name:"js4",route:"/docs/js/js4"},{kind:"MdxPage",name:"js5",route:"/docs/js/js5"},{kind:"MdxPage",name:"js6",route:"/docs/js/js6"},{kind:"MdxPage",name:"js7",route:"/docs/js/js7"},{kind:"MdxPage",name:"js8",route:"/docs/js/js8"},{kind:"MdxPage",name:"js9",route:"/docs/js/js9"}]},{kind:"MdxPage",name:"js",route:"/docs/js"},{kind:"Folder",name:"leetcode",route:"/docs/leetcode",children:[{kind:"Meta",data:{lc1:"Two Sum"}},{kind:"MdxPage",name:"lc1",route:"/docs/leetcode/lc1"}]},{kind:"MdxPage",name:"leetcode",route:"/docs/leetcode"},{kind:"Folder",name:"machinelearning",route:"/docs/machinelearning",children:[{kind:"Meta",data:{chapter1:"Introduction Of ML",chapter2:"Features And Labels",chapter3:"Data Collection process",chapter4:"Supervised And Unsupervised Learning",sl:"Supervised Details",usl:"Unsupervised Details",chapter5:"Scikit Learn",chapter6:"Training And Test Data",sml:"Scalable Machine Learning"}},{kind:"MdxPage",name:"chapter1",route:"/docs/machinelearning/chapter1"},{kind:"MdxPage",name:"chapter2",route:"/docs/machinelearning/chapter2"},{kind:"MdxPage",name:"chapter3",route:"/docs/machinelearning/chapter3"},{kind:"MdxPage",name:"chapter4",route:"/docs/machinelearning/chapter4"},{kind:"MdxPage",name:"chapter5",route:"/docs/machinelearning/chapter5"},{kind:"MdxPage",name:"chapter6",route:"/docs/machinelearning/chapter6"},{kind:"MdxPage",name:"sl",route:"/docs/machinelearning/sl"},{kind:"MdxPage",name:"sml",route:"/docs/machinelearning/sml"},{kind:"MdxPage",name:"usl",route:"/docs/machinelearning/usl"}]},{kind:"MdxPage",name:"machinelearning",route:"/docs/machinelearning"},{kind:"Folder",name:"next",route:"/docs/next",children:[{kind:"Meta",data:{next1:"Introduction"}},{kind:"MdxPage",name:"next1",route:"/docs/next/next1"}]},{kind:"MdxPage",name:"next",route:"/docs/next"},{kind:"Folder",name:"node",route:"/docs/node",children:[{kind:"Meta",data:{node1:"Introduction to Node js",node2:"Basic Concepts",node3:"Install and Set Up",node4:"First Node js Script",node5:"Fundamentals and Features",node6:"Core Modules",node7:"Create Server",node8:"package.json file",node9:"Challenge",node10:"Nodemon package",node11:"Create a Basic API",node12:"Taking CmdLine Input ",node13:"Display file list",node14:"CRUD Operations",node15:"Asynchronous",node16:"Handle Asynchronous Data",node17:"Node js Works: Event Loop",node18:" Express js Framework",node19:"Routing with Express.js",node20:"Rendering HTML Pages",node21:"Make Html Pages",node22:"Remove extension from URL"}},{kind:"MdxPage",name:"node1",route:"/docs/node/node1"},{kind:"MdxPage",name:"node10",route:"/docs/node/node10"},{kind:"MdxPage",name:"node11",route:"/docs/node/node11"},{kind:"MdxPage",name:"node12",route:"/docs/node/node12"},{kind:"MdxPage",name:"node13",route:"/docs/node/node13"},{kind:"MdxPage",name:"node14",route:"/docs/node/node14"},{kind:"MdxPage",name:"node15",route:"/docs/node/node15"},{kind:"MdxPage",name:"node16",route:"/docs/node/node16"},{kind:"MdxPage",name:"node17",route:"/docs/node/node17"},{kind:"MdxPage",name:"node18",route:"/docs/node/node18"},{kind:"MdxPage",name:"node19",route:"/docs/node/node19"},{kind:"MdxPage",name:"node2",route:"/docs/node/node2"},{kind:"MdxPage",name:"node20",route:"/docs/node/node20"},{kind:"MdxPage",name:"node21",route:"/docs/node/node21"},{kind:"MdxPage",name:"node22",route:"/docs/node/node22"},{kind:"MdxPage",name:"node3",route:"/docs/node/node3"},{kind:"MdxPage",name:"node4",route:"/docs/node/node4"},{kind:"MdxPage",name:"node5",route:"/docs/node/node5"},{kind:"MdxPage",name:"node6",route:"/docs/node/node6"},{kind:"MdxPage",name:"node7",route:"/docs/node/node7"},{kind:"MdxPage",name:"node8",route:"/docs/node/node8"},{kind:"MdxPage",name:"node9",route:"/docs/node/node9"}]},{kind:"MdxPage",name:"node",route:"/docs/node"},{kind:"Folder",name:"project",route:"/docs/project",children:[{kind:"Folder",name:"CrowdDeFiX",route:"/docs/project/CrowdDeFiX",children:[{kind:"Meta",data:{cdfx1:"Installation",cdfx2:"Smart Contract",cdfx3:"Deployment",cdfx4:"Client Setup",cdfx5:"Basic Setup (main.jsx)",cdfx6:"Tailwind Setup",cdfx7:"Assets",cdfx8:"Folder Setup",cdfx9:"App.jsx",cdfx10:"Page's files configuration"}},{kind:"MdxPage",name:"cdfx1",route:"/docs/project/CrowdDeFiX/cdfx1"},{kind:"MdxPage",name:"cdfx10",route:"/docs/project/CrowdDeFiX/cdfx10"},{kind:"MdxPage",name:"cdfx2",route:"/docs/project/CrowdDeFiX/cdfx2"},{kind:"MdxPage",name:"cdfx3",route:"/docs/project/CrowdDeFiX/cdfx3"},{kind:"MdxPage",name:"cdfx4",route:"/docs/project/CrowdDeFiX/cdfx4"},{kind:"MdxPage",name:"cdfx5",route:"/docs/project/CrowdDeFiX/cdfx5"},{kind:"MdxPage",name:"cdfx6",route:"/docs/project/CrowdDeFiX/cdfx6"},{kind:"MdxPage",name:"cdfx7",route:"/docs/project/CrowdDeFiX/cdfx7"},{kind:"MdxPage",name:"cdfx8",route:"/docs/project/CrowdDeFiX/cdfx8"},{kind:"MdxPage",name:"cdfx9",route:"/docs/project/CrowdDeFiX/cdfx9"}]},{kind:"MdxPage",name:"CrowdDeFiX",route:"/docs/project/CrowdDeFiX"},{kind:"Folder",name:"DeCryptX",route:"/docs/project/DeCryptX",children:[{kind:"Meta",data:{dcx1:"Intro",dcx2:"Cranq Setup",dcx3:"Metamask"}},{kind:"MdxPage",name:"dcx1",route:"/docs/project/DeCryptX/dcx1"},{kind:"MdxPage",name:"dcx2",route:"/docs/project/DeCryptX/dcx2"},{kind:"MdxPage",name:"dcx3",route:"/docs/project/DeCryptX/dcx3"}]},{kind:"Meta",data:{xt:"xamtrack",gg:"OctoSpace",CrowdDeFiX:"CrowdDeFiX",DeCryptX:" DeCryptX",mer
1nchat:"Mernchat"}},{kind:"Folder",name:"gg",route:"/docs/project/gg",children:[{kind:"Meta",data:{"-- Backend â© --":{type:"separator",title:"Backend â½"},gg1:"Installation",gg2:"Backend & Middleware",gg3:"MongoDB Registering",gg4:"ERD Model",gg5:"Model 1 - User",gg6:"Auth Routes 1",gg7:"Auth Routes 2",gg8:"Auth Routes 3",gg9:"Auth Routes 4",gg10:"Users Routes 1",gg11:"Users Routes 2",gg12:"Users Routes 3",gg13:"Posts Routes 1",gg14:"Posts Routes 2",gg15:"Posts Routes 3",gg16:"Backend Data adding",gg17:"Data Inserting","-- Frontend â© --":{type:"separator",title:"Frontend â½"},gg18:"Frontend Setup",gg19:"Redux Setup"}},{kind:"MdxPage",name:"gg1",route:"/docs/project/gg/gg1"},{kind:"MdxPage",name:"gg10",route:"/docs/project/gg/gg10"},{kind:"MdxPage",name:"gg11",route:"/docs/project/gg/gg11"},{kind:"MdxPage",name:"gg12",route:"/docs/project/gg/gg12"},{kind:"MdxPage",name:"gg13",route:"/docs/project/gg/gg13"},{kind:"MdxPage",name:"gg14",route:"/docs/project/gg/gg14"},{kind:"MdxPage",name:"gg15",route:"/docs/project/gg/gg15"},{kind:"MdxPage",name:"gg16",route:"/docs/project/gg/gg16"},{kind:"MdxPage",name:"gg17",route:"/docs/project/gg/gg17"},{kind:"MdxPage",name:"gg18",route:"/docs/project/gg/gg18"},{kind:"MdxPage",name:"gg19",route:"/docs/project/gg/gg19"},{kind:"MdxPage",name:"gg2",route:"/docs/project/gg/gg2"},{kind:"MdxPage",name:"gg3",route:"/docs/project/gg/gg3"},{kind:"MdxPage",name:"gg4",route:"/docs/project/gg/gg4"},{kind:"MdxPage",name:"gg5",route:"/docs/project/gg/gg5"},{kind:"MdxPage",name:"gg6",route:"/docs/project/gg/gg6"},{kind:"MdxPage",name:"gg7",route:"/docs/project/gg/gg7"},{kind:"MdxPage",name:"gg8",route:"/docs/project/gg/gg8"},{kind:"MdxPage",name:"gg9",route:"/docs/project/gg/gg9"}]},{kind:"MdxPage",name:"gg",route:"/docs/project/gg"},{kind:"MdxPage",name:"mernchat",route:"/docs/project/mernchat"},{kind:"Folder",name:"xt",route:"/docs/project/xt",children:[{kind:"Meta",data:{xt1:"Introduction",xt2:"create Server with Express JS",xt3:"Routes & Controllers",xt4:"Testing Postman & Thunderbolt",xt5:"MongoDB & Mongoose",xt6:"Secure with DOTENV",xt7:"Create Schema & Model",xt8:"Stored API data",xt9:"Read Data from Database",xt10:"Filtration & Searching Functionality",xt11:"Improve Filter in API ",xt12:"Bugs Handling",xt13:"Test Data Making Script",xt14:"Regex - Advance Search ",xt15:"SORT functionality",xt16:"Return Specific Document Fields",xt17:"Pagination",xt18:"Host REST API"}},{kind:"MdxPage",name:"xt1",route:"/docs/project/xt/xt1"},{kind:"MdxPage",name:"xt10",route:"/docs/project/xt/xt10"},{kind:"MdxPage",name:"xt11",route:"/docs/project/xt/xt11"},{kind:"MdxPage",name:"xt12",route:"/docs/project/xt/xt12"},{kind:"MdxPage",name:"xt13",route:"/docs/project/xt/xt13"},{kind:"MdxPage",name:"xt14",route:"/docs/project/xt/xt14"},{kind:"MdxPage",name:"xt15",route:"/docs/project/xt/xt15"},{kind:"MdxPage",name:"xt16",route:"/docs/project/xt/xt16"},{kind:"MdxPage",name:"xt17",route:"/docs/project/xt/xt17"},{kind:"MdxPage",name:"xt18",route:"/docs/project/xt/xt18"},{kind:"MdxPage",name:"xt2",route:"/docs/project/xt/xt2"},{kind:"MdxPage",name:"xt3",route:"/docs/project/xt/xt3"},{kind:"MdxPage",name:"xt4",route:"/docs/project/xt/xt4"},{kind:"MdxPage",name:"xt5",route:"/docs/project/xt/xt5"},{kind:"MdxPage",name:"xt6",route:"/docs/project/xt/xt6"},{kind:"MdxPage",name:"xt7",route:"/docs/project/xt/xt7"},{kind:"MdxPage",name:"xt8",route:"/docs/project/xt/xt8"},{kind:"MdxPage",name:"xt9",route:"/docs/project/xt/xt9"}]},{kind:"MdxPage",name:"xt",route:"/docs/project/xt"}]},{kind:"MdxPage",name:"project",route:"/docs/project"},{kind:"Folder",name:"react",route:"/docs/react",children:[{kind:"Meta",data:{react1:"Introduction",react2:"Installation",react3:"Folder Structure",react4:"jsx",react5:"Components",react6:"Styling Components",react7:"Props & Props-Types",react8:"Create Movie Website",react9:"Tools & If-Else & ternary",reactallinone:"Interview Questions"}},{kind:"MdxPage",name:"react1",route:"/docs/react/react1"},{kind:"MdxPage",name:"react2",route:"/docs/react/react2"},{kind:"MdxPage",name:"react3",route:"/docs/react/react3"},{kind:"MdxPage",name:"react4",route:"/docs/react/react4"},{kind:"MdxPage",name:"react5",route:"/docs/react/react5"},{kind:"MdxPage",name:"react6",route:"/docs/react/react6"},{kind:"MdxPage",name:"react7",route:"/docs/react/react7"},{kind:"MdxPage",name:"react8",route:"/docs/react/react8"},{kind:"MdxPage",name:"react9",route:"/docs/react/react9"},{kind:"MdxPage",name:"reactallinone",route:"/docs/react/reactallinone"}]},{kind:"MdxPage",name:"react",route:"/docs/react"},{kind:"Folder",name:"reactnative",route:"/docs/reactnative",children:[{kind:"Meta",data:{react1:"Installation",react2:"CreateApp & Debugging",react3:"File Structure",react4:"Hello World App",react5:"Styling",react6:"Hook : Dark & light",react7:"Bug Info - version 63","-- Second App â© --":{type:"separator",title:"Second App â©"},react8:"Multi file components"}},{kind:"MdxPage",name:"react1",route:"/docs/reactnative/react1"},{kind:"MdxPage",name:"react2",route:"/docs/reactnative/react2"},{kind:"MdxPage",name:"react3",route:"/docs/reactnative/react3"},{kind:"MdxPage",name:"react4",route:"/docs/reactnative/react4"},{kind:"MdxPage",name:"react5",route:"/docs/reactnative/react5"},{kind:"MdxPage",name:"react6",route:"/docs/reactnative/react6"},{kind:"MdxPage",name:"react7",route:"/docs/reactnative/react7"},{kind:"MdxPage",name:"react8",route:"/docs/reactnative/react8"}]},{kind:"MdxPage",name:"reactnative",route:"/docs/reactnative"}
1,{kind:"MdxPage",name:"soonmsz",route:"/docs/soonmsz",frontMatter:{headeronly:!0,searchable:!1}},{kind:"Folder",name:"tailwindcss",route:"/docs/tailwindcss",children:[{kind:"Meta",data:{chapter1:"Chapter 1",chapter2:"Chapter 2"}},{kind:"MdxPage",name:"chapter1",route:"/docs/tailwindcss/chapter1"},{kind:"MdxPage",name:"chapter2",route:"/docs/tailwindcss/chapter2"}]},{kind:"MdxPage",name:"tailwindcss",route:"/docs/tailwindcss"}]},{kind:"MdxPage",name:"index",route:"/",frontMatter:{title:"CodeXam â Best Coding Learning Platform"}},{kind:"Folder",name:"playground",route:"/playground",children:[{kind:"MdxPage",name:"js",route:"/playground/js"},{kind:"Meta",data:{js:"JS"}}]},{kind:"Folder",name:"showcase",route:"/showcase",children:[{kind:"Meta",data:{bd1:{title:"Backend Development - Guide 1",type:"page",display:"hidden",theme:{display:"hidden"}}}},{kind:"MdxPage",name:"bd1",route:"/showcase/bd1"}]},{kind:"MdxPage",name:"showcase",route:"/showcase",frontMatter:{title:"Helpful Guide for Beginners"}},{kind:"Folder",name:"xamdev",route:"/xamdev",children:[{kind:"Meta",data:{index:"Introduction","-- Question --":{type:"separator",title:"QNA Template"},question:"Question & Answer Template"}},{kind:"MdxPage",name:"index",route:"/xamdev"},{kind:"Folder",name:"question",route:"/xamdev/question",children:[{kind:"Meta",data:{longquestion:"Long Question Template",mcq:"MCQ Template"}},{kind:"MdxPage",name:"longquestion",route:"/xamdev/question/longquestion"},{kind:"MdxPage",name:"mcq",route:"/xamdev/question/mcq"}]},{kind:"MdxPage",name:"question",route:"/xamdev/question"}]},{kind:"Folder",name:"xamdoc",route:"/xamdoc",children:[{kind:"Folder",name:"CXBS",route:"/xamdoc/CXBS",children:[{kind:"Meta",data:{ra:"\uD83C\uDFDB REST Architecture",rk:"\uD83D\uDD11 REST Key",crp:"\uD83D\uDCDD Client Requirements",fr:"\uD83D\uDCDA Resource",ideig:"\uD83D\uDEE0 Installation Guide",dbst:" \uD83D\uDDC4 Database Structure",setup:"âï¸ Setup",uapi:"\uD83D\uDCE1 User API"}},{kind:"MdxPage",name:"crp",route:"/xamdoc/CXBS/crp"},{kind:"MdxPage",name:"dbst",route:"/xamdoc/CXBS/dbst"},{kind:"MdxPage",name:"fr",route:"/xamdoc/CXBS/fr"},{kind:"MdxPage",name:"ideig",route:"/xamdoc/CXBS/ideig"},{kind:"MdxPage",name:"ra",route:"/xamdoc/CXBS/ra"},{kind:"MdxPage",name:"rk",route:"/xamdoc/CXBS/rk"},{kind:"MdxPage",name:"setup",route:"/xamdoc/CXBS/setup"},{kind:"MdxPage",name:"uapi",route:"/xamdoc/CXBS/uapi"}]},{kind:"MdxPage",name:"CXBS",route:"/xamdoc/CXBS"},{kind:"Meta",data:{CXBS:"Backend"}}]},{kind:"MdxPage",name:"xamdoc",route:"/xamdoc",frontMatter:{title:"Developer Space CodeXam"}}],flexsearch:{codeblocks:!1},title:"CodeXam Website Setup"},pageNextRoute:"/docs/about",nextraLayout:t.ZP,themeConfig:a.Z};var S=!0;function A(s){let{children:e}=s,r=Object.assign({button:"button"},(0,c.ah)()),[i,l]=(0,w.useState)(0);return(0,n.jsxs)(r.button,{onClick:()=>l(i+1),children:[e,i]})}let L=()=>{let s=Object.assign({strong:"strong"},(0,c.ah)()),{stars:e}=(0,C.sC)();return(0,n.jsx)(s.strong,{children:e})};function D(s){let e=Object.assign({h1:"h1",h2:"h2",pre:"pre",code:"code",span:"span",details:"details",p:"p",summary:"summary",a:"a",h3:"h3",strong:"strong",svg:"svg",path:"path",ul:"ul",li:"li",h4:"h4",del:"del",input:"input",table:"table",thead:"thead",tr:"tr",th:"th",tbody:"tbody",td:"td",img:"img",em:"em"},(0,c.ah)(),s.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h1,{children:"CodeXam Website Setup"}),"\n",(0,n.jsx)("h3",{align:"left",children:"There's no need to read this as it's very complicated advanced page setup. I included this for those who want to learn more."}),"\n",(0,n.jsx)(e.h2,{id:"a-card",children:"a. Card"}),"\n",(0,n.jsx)(e.pre,{"data-language":"jsx","data-theme":"default",hasCopyCode:!0,children:(0,n.jsxs)(e.code,{"data-language":"jsx","data-theme":"default",children:[(0,n.jsx)(e.span,{className:"line",children:" "}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" { Card"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" Cards } "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'@components/card'"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:" "}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"<"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Cards"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Card"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"image"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"arrow"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"title"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"CodeXam Theme"'})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"href"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"/docs/docs-theme/start"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <></>"})}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" </"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Card"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Card"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"image"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"arrow"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"title"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"Blog theme"'})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"href"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"/docs-theme/installation"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <></>"})}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" </"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Card"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Card"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"title"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"Start with empty theme"'})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"href"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"/docs-theme/installation"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" </"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Card"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"</"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Cards"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]})]})}),"\n","\n",(0,n.jsxs)(v.o,{children:[(0,n.jsx)(v.Z,{image:!0,arrow:!0,title:"CodeXam Theme",href:"/docs/docs-theme/start",children:(0,n.jsx)(n.Fragment,{children:(0,n.jsx)(x(),{placeholder:"blur",src:d})})}),(0,n.jsx)(v.Z,{image:!0,arrow:!0,title:"CodeXam Theme 2",href:"/docs-theme/installation",children:(0,n.jsx)(n.Fragment,{children:(0,n.jsx)(x(),{placeholder:"blur",src:p})})}),(0,n.jsx)(v.Z,{title:"Start with empty theme",href:"/docs-theme/installation"})]}),"\n",(0,n.jsx)(e.h2,{id:"b-faq-section",children:"b. FAQ Section"}),"\n",(0,n.jsx)(e.pre,{"data-language":"mdx","data-theme":"default",hasCopyCode:!0,children:(0,n.jsxs)(e.code,{"data-language":"mdx","data-theme":"default",children:[(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"<"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"details"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"svg"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"version"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"1.1"'})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"xmlns"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"http://www.w3.org/2000/svg"'})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"height"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"55px"'})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"viewBox"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"0 0 699 178"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"polygon"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"fill"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"none"'})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"points"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"699,178 0,178 0,0 699,0"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"/>"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"path"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"fill"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"currentColor"'})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"d"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"M88.09 129.04Q75.99 129.04 66.36 123.92Q56.74 118.81 51.24 109.68Q45.74 100.55 45.74 89L45.74 89Q45.74 77.45 51.24 68.32Q56.74 59.19 66.36 54.08Q75.99 48.96 88.09 48.96L88.09 48.96Q98.65 48.96 107.12 52.70Q115.59 56.44 121.20 63.48L121.20 63.48L107.34 76.02Q99.86 67 89.19 67L89.19 67Q82.92 67 78.03 69.75Q73.13 72.50 70.44 77.50Q67.74 82.51 67.74 89L67.74 89Q67.74 95.49 70.44 100.50Q73.13 105.50 78.03 108.25Q82.92 111 89.19 111L89.19 111Q99.86 111 107.34 101.98L107.34 101.98L121.20 114.52Q115.59 121.56 107.12 125.30Q98.65 129.04 88.09 129.04L88.09 129.04ZM168.06 129.04Q155.85 129.04 146.12 123.87Q136.38 118.70 130.82 109.57Q125.27 100.44 125.27 89L125.27 89Q125.27 77.56 130.82 68.43Q136.38 59.30 146.12 54.13Q155.85 48.96 168.06 48.96L168.06 48.96Q180.27 48.96 190.00 54.13Q199.74 59.30 205.30 68.43Q210.85 77.56 210.85 89L210.85 89Q210.85 100.44 205.30 109.57Q199.74 118.70 190.00 123.87Q180.27 129.04 168.06 129.04L168.06 129.04ZM168.06 111Q173.89 111 178.62 108.25Q183.35 105.50 186.10 100.50Q188.85 95.49 188.85 89L188.85 89Q188.85 82.51 186.10 77.50Q183.35 72.50 178.62 69.75Q173.89 67 168.06 67L168.06 67Q162.23 67 157.50 69.75Q152.77 72.50 150.02 77.50Q147.27 82.51 147.27 89L147.27 89Q147.27 95.49 150.02 100.50Q152.77 105.50 157.50 10
18.25Q162.23 111 168.06 111L168.06 111ZM222.29 127.50L222.29 50.50L258.70 50.50Q271.35 50.50 281.14 55.23Q290.93 59.96 296.32 68.65Q301.71 77.34 301.71 89L301.71 89Q301.71 100.66 296.32 109.35Q290.93 118.04 281.14 122.77Q271.35 127.50 258.70 127.50L258.70 127.50L222.29 127.50ZM244.07 110.12L257.82 110.12Q267.72 110.12 273.72 104.51Q279.71 98.90 279.71 89L279.71 89Q279.71 79.10 273.72 73.49Q267.72 67.88 257.82 67.88L257.82 67.88L244.07 67.88L244.07 110.12ZM334.71 110.67L374.97 110.67L374.97 127.50L313.15 127.50L313.15 50.50L373.54 50.50L373.54 67.33L334.71 67.33L334.71 80.31L368.92 80.31L368.92 96.59L334.71 96.59L334.71 110.67ZM460.11 127.50L435.03 127.50L419.08 103.63L403.35 127.50L378.49 127.50L406.54 88.56L379.70 50.50L404.23 50.50L419.63 72.72L434.81 50.50L458.35 50.50L431.51 87.68L460.11 127.50ZM520.94 127.50L514.89 112.54L482.33 112.54L476.28 127.50L454.06 127.50L488.05 50.50L509.50 50.50L543.60 127.50L520.94 127.50ZM488.71 96.48L508.51 96.48L498.61 71.84L488.71 96.48ZM639.30 127.50L619.28 127.50L619.06 86.69L599.26 119.91L589.58 119.91L569.89 87.79L569.89 127.50L549.76 127.50L549.76 50.50L567.69 50.50L594.75 94.94L621.15 50.50L639.08 50.50L639.30 127.50Z"'})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" />"})}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" </"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"svg"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"summary"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">What is CodeXam Website?</"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"summary"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string)"},children:"`"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string)"},children:" Project- based"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string)"},children:"`"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" learning is an educational approach that encourages learning by doing. In other words, it involves direct involvement in a course of study. Rather than lecturing or reading from a textbook, teachers lead students through projects that help them learn and apply their knowledge. This is a more effective way to teach people and ensure they can perform well on the job."})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:" "}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"</"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"details"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:" "}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"<"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"details"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"summary"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">Can I use this website For collage study ?</"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"summary"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" Yes, (todo)"})}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"</"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"details"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:" "}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"<"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"details"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"summary"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">Can I use this website for project making?</"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"summary"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" Yes, (todo)"})}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"</"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"details"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]})]})}),"\n",(0,n.jsxs)(e.details,{children:[(0,n.jsxs)("svg",{version:"1.1",xmlns:"http://www.w3.org/2000/svg",height:"55px",viewBox:"0 0 699 178",children:[(0,n.jsx)("polygon",{fill:"none",points:"699,178 0,178 0,0 699,0"}),(0,n.jsx)("path",{fill:"currentColor",d:"M88.09 129.04Q75.99 129.04 66.36 123.92Q56.74 118.81 51.24 109.68Q45.74 100.55 45.74 89L45.74 89Q45.74 77.45 51.24 68.32Q56.74 59.19 66.36 54.08Q75.99 48.96 88.09 48.96L88.09 48.96Q98.65 48.96 107.12 52.70Q115.59 56.44 121.20 63.48L121.20 63.48L107.34 76.02Q99.86 67 89.19 67L89.19 67Q82.92 67 78.03 69.75Q73.13 72.50 70.44 77.50Q67.74 82.51 67.74 89L67.74 89Q67.74 95.49 70.44 100.50Q73.13 105.50 78.03 108.25Q82.92 111 89.19 111L89.19 111Q99.86 111 107.34 101.98L107.34 101.98L121.20 114.52Q115.59 121.56 107.12 125.30Q98.65 129.04 88.09 129.04L88.09 129.04ZM168.06 129.04Q155.85 129.04 146.12 123.87Q136.38 118.70 130.82 109.57Q125.27 100.44 125.27 89L125.27 89Q125.27 77.56 130.82 68.43Q136.38 59.30 146.12 54.13Q155.85 48.96 168.06 48.96L168.06 48.96Q180.27 48.96 190.00 54.13Q199.74 59.30 205.30 68.43Q210.85 77.56 210.85 89L210.85 89Q210.85 100.44 205.30 109.57Q199.74 118.70 190.00 123.87Q180.27 129.04 168.06 129.04L168.06 129.04ZM168.06 111Q173.89 111 178.62 108.25Q183.35 105.50 186.10 100.50Q188.85 95.49 188.85 89L188.85 89Q188.85 82.51 186.10 77.50Q183.35 72.50 178.62 69.75Q173.89 67 168.06 67L168.06 67Q162.23 67 157.50 69.75Q152.77 72.50 150.02 77.50Q147.27 82.51 147.27 89L147.27 89Q147.27 95.49 150.02 100.50Q152.77 105.50 157.50 108.25Q162.23 111 168.06 111L168.06 111ZM222.29 127.50L222.29 50.50L258.70 50.50Q271.35 50.50 281.14 55.23Q290.93 59.96 296.32 68.65Q301.71 77.34 301.71 89L301.71 89Q301.71 100.66 296.32 109.35Q290.93 118.04 281.14 122.77Q271.35 127.50 258.70 127.50L258.70 127.50L222.29 127.50ZM244.07 110.12L257.82 110.12Q267.72 110.12 273.72 104.51Q279.71 98.90 279.71 89L279.71 89Q279.71 79.10 273.72 73.49Q267.72 67.88 257.82 67.88L257.82 67.88L244.07 67.88L244.07 110.12ZM334.71 110.
167L374.97 110.67L374.97 127.50L313.15 127.50L313.15 50.50L373.54 50.50L373.54 67.33L334.71 67.33L334.71 80.31L368.92 80.31L368.92 96.59L334.71 96.59L334.71 110.67ZM460.11 127.50L435.03 127.50L419.08 103.63L403.35 127.50L378.49 127.50L406.54 88.56L379.70 50.50L404.23 50.50L419.63 72.72L434.81 50.50L458.35 50.50L431.51 87.68L460.11 127.50ZM520.94 127.50L514.89 112.54L482.33 112.54L476.28 127.50L454.06 127.50L488.05 50.50L509.50 50.50L543.60 127.50L520.94 127.50ZM488.71 96.48L508.51 96.48L498.61 71.84L488.71 96.48ZM639.30 127.50L619.28 127.50L619.06 86.69L599.26 119.91L589.58 119.91L569.89 87.79L569.89 127.50L549.76 127.50L549.76 50.50L567.69 50.50L594.75 94.94L621.15 50.50L639.08 50.50L639.30 127.50Z"})]}),(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.summary,{children:"What is CodeXam Website?"}),"\n",(0,n.jsx)(e.code,{children:" Project- based"})," learning is an educational approach that encourages learning by doing. In other words, it involves direct involvement in a course of study. Rather than lecturing or reading from a textbook, teachers lead students through projects that help them learn and apply their knowledge. This is a more effective way to teach people and ensure they can perform well on the job."]})]}),"\n",(0,n.jsx)(e.details,{children:(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.summary,{children:"Can I use this website For collage study ?"}),"\nYes, (todo)"]})}),"\n",(0,n.jsx)(e.details,{children:(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.summary,{children:"Can I use this website for project making?"}),"\nYes, (todo)"]})}),"\n",(0,n.jsxs)(e.h2,{id:"c-figurecaption-tag",children:["c. ",(0,n.jsx)(e.code,{children:"<figurecaption>"})," Tag"]}),"\n",(0,n.jsxs)(e.p,{children:["The ",(0,n.jsx)(e.code,{children:"<figurecaption>"})," element is used as a child of a parent ",(0,n.jsx)(e.code,{children:"<figure>"})," element to attach a caption to the image, table, or chart contained in the ",(0,n.jsx)(e.code,{children:"<figure>"})," element."]}),"\n",(0,n.jsx)(e.pre,{"data-language":"mdx","data-theme":"default",hasCopyCode:!0,children:(0,n.jsxs)(e.code,{"data-language":"mdx","data-theme":"default",children:[(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"<"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"figure"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string)"},children:""})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"figurecaption"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" Example: "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string)"},children:"["}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"CodeXam Docs Theme"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string)"},children:"](/docs/docs-theme)"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" </"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"figurecaption"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"</"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"figure"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:" "})]})}),"\n",(0,n.jsxs)("figure",{children:[(0,n.jsx)(e.p,{children:(0,n.jsx)(x(),{placeholder:"blur",src:k})}),(0,n.jsx)("figurecaption",{children:(0,n.jsxs)(e.p,{children:["Example: ",(0,n.jsx)(e.a,{href:"/docs/docs-theme",children:"CodeXam Docs Theme"})]})})]}),"\n",(0,n.jsx)(e.h2,{id:"d-default-behavior",children:"d. Default Behavior"}),"\n",(0,n.jsxs)(e.p,{children:["By default, the page map contains all ",(0,n.jsx)(e.code,{children:".md"})," and ",(0,n.jsx)(e.code,{children:".mdx"})," filenames and the directory structure, sorted alphabetically.\nThen, CodeXam Page will use the ",(0,n.jsx)(e.a,{href:"https://github.com/vercel/title",children:"title"})," package to get formatted page names from filenames."]}),"\n",(0,n.jsx)(e.p,{children:"For example if you have the following structure:"}),"\n",(0,n.jsx)(e.pre,{"data-language":"text","data-theme":"default",hasCopyCode:!0,children:(0,n.jsxs)(e.code,{"data-language":"text","data-theme":"default",children:[(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"pages/"})}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" contact.md"})}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" index.mdx"})}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" about/"})}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" legal.md"})}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" index.mdx"})})]})}),"\n",(0,n.jsx)(e.p,{children:"The resolved page map will be (note that all names were sorted alphabetically):"}),"\n",(0,n.jsx)(e.pre,{"data-language":"js","data-theme":"default",hasCopyCode:!0,children:(0,n.jsxs)(e.code,{"data-language":"js","data-theme":"default",children:[(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"["})}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" {"})}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" name"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'About'"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" children"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" ["})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" { name"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Index'"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" }"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" { name"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Legal'"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" }"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" ]"})}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" }"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" { name"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Contact'"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" }"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" { name"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Index'"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" }"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"]"})})]})}),"\n",(0,n.jsx)(e.p,{children:"And the global page map will be bundled to each page by CodeXam. Then, configured theme will render the actual UI with that page map."}),"\n",(0,n.jsx)(e.h3,{id:"metajson",children:"meta.json"}),"\n",(0,n.jsx)(e.p,{children:"Itâs very common to customize each pageâs title, rather than just using the filename. For example it doesnât make sense to have a page titled âIndexâ, but instead have a page titled âHomeâ."}),"\n",(0,n.jsxs)(e.p,{children:["Thatâs where ",(0,n.jsx)(e.code,{children:"_meta.json"})," comes in. You can have an ",(0,n.jsx)(e.code,{children:"_meta.json"})," file in each directory, and it will be used to override the default configuration of each page:"]}),"\n",(0,n.jsx)(e.pre,{"data-language":"text","data-theme":"default",hasCopyCode:!0,children:(0,n.jsxs)(e.code,{"data-language":"text","data-theme":"default",children:[(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"pages/"})}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" _meta.json"})}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" contact.md"})}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" index.mdx"})}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" about/"})}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" _meta.json"})}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" legal.md"})}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" index.mdx"})})]})}),"\n",(0,n.jsxs)(e.p,{children:["And you can put this in your ",(0,n.jsx)(e.code,{children:"pages/_meta.json"})," file:"]}),"\n",(0,n.jsx)(e.pre,{"data-language":"json","data-theme":"default",filename:"pages/_meta.json",hasCopyCode:!0,children:(0,n.jsxs)(e.code,{"data-language":"json","data-theme":"default",children:[(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"{"})}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:'"index"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"My Homepage"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:'"contact"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"Contact Us"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:'"about"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"About Us"'})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"}"})})]})}),"\n",(0,n.jsxs)(e.p,{children:["The order of each page, and the correct title. Alternatively, you can do it with ",(0,n.jsx)(e.code,{children:"title"})," and have other configurations in there as well:"]}),"\n",(0,n.jsx)(e.pre,{"data-language":"json","data-theme":"default",filename:"pages/_meta.json",hasCopyCode:!0,children:(0,n.jsxs)(e.code,{"data-language":"json","data-theme":"default",children:[(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"{"})}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:'"index"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"My Homepage"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:'"contact"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"Contact Us"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:'"about"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" {"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:'"title"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"About Us"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:'"...extra configurations..."'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:":"}),(0,n.jsx)(e.span,{s
1tyle:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"..."'})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" }"})}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"}"})})]})}),"\n",(0,n.jsx)(e.h2,{id:"e-different-svg-card",children:"e. Different SVG Card"}),"\n",(0,n.jsxs)(e.p,{children:["The extra configurations are passed to the ",(0,n.jsx)(e.strong,{children:"theme"})," as additional information. Check the corresponding pages for more information:"]}),"\n",(0,n.jsx)("h3",{className:"text-center font-extrabold md:text-1xl mt-8",children:"MarkdownIcon & GlobeIcon import Form Icon Component"}),"\n",(0,n.jsx)(e.pre,{"data-language":"mdx","data-theme":"default",hasCopyCode:!0,children:(0,n.jsxs)(e.code,{"data-language":"mdx","data-theme":"default",children:[(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" { Card"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" Cards } "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'@components/card'"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:" "}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" markdownIcon "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'@components/icons/markdown'"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" globeIcon "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'@components/icons/globe'"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:" "}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"<"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Cards"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Card"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"icon"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"{markdownIcon} "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"title"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"Markdown"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"href"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"/markdown"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"/>"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Card"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"icon"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"{globeIcon} "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"title"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"Next.js I18n"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"href"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"/i18n"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"/>"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"</"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Cards"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:" "})]})}),"\n","\n",(0,n.jsxs)(v.o,{children:[(0,n.jsx)(v.Z,{icon:g,title:"Markdown",href:"/markdown"}),(0,n.jsx)(v.Z,{icon:m,title:"Next.js I18n",href:"/i18n"})]}),"\n",(0,n.jsx)("h3",{className:"text-center font-extrabold md:text-1xl mt-8",children:"Get Started , Page Configuration , Theme Configuration , Components"}),"\n",(0,n.jsx)(e.pre,{"data-language":"mdx","data-theme":"default",hasCopyCode:!0,children:(0,n.jsxs)(e.code,{"data-language":"mdx","data-theme":"default",children:[(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"<"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Cards"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Card"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"icon"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"{"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"svg"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"width"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"24"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"viewBox"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"0 0 20 20"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"fill"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"currentColor"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"path"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"d"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" />"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" </"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"svg"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" } "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"title"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"Get Started"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"href"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"/docs/docs-theme/start"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" </"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Card"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Card"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"icon"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"{"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"svg"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"width"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"24"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"viewBox"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"0 0 20 20"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"fill"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"currentColor"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"path"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"d"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"M7 3a1 1 0 000 2h6a1 1 0 100-2H7zM4 7a1 1 0 011-1h10a1 1 0 110 2H5a1 1 0 01-1-1zM2 11a2 2 0 012-2h12a2 2 0 012 2v4a2 2 0 01-2 2H4a2 2 0 01-2-2v-4z"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" />"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" </"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"svg"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" } "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"title"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"Page Configuration"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"href"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"/docs/docs-theme/page-configuration"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" </"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Card"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Card"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"icon"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"{"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"svg"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"width"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"24"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"viewBox"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"0 0 20 20"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"fill"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"currentColor"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"path"}),(0,n.jsx)(e.span,{style:{color:"
1var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"fillRule"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"evenodd"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"d"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"M11.49 3.17c-.38-1.56-2.6-1.56-2.98 0a1.532 1.532 0 01-2.286.948c-1.372-.836-2.942.734-2.106 2.106.54.886.061 2.042-.947 2.287-1.561.379-1.561 2.6 0 2.978a1.532 1.532 0 01.947 2.287c-.836 1.372.734 2.942 2.106 2.106a1.532 1.532 0 012.287.947c.379 1.561 2.6 1.561 2.978 0a1.533 1.533 0 012.287-.947c1.372.836 2.942-.734 2.106-2.106a1.533 1.533 0 01.947-2.287c1.561-.379 1.561-2.6 0-2.978a1.532 1.532 0 01-.947-2.287c.836-1.372-.734-2.942-2.106-2.106a1.532 1.532 0 01-2.287-.947zM10 13a3 3 0 100-6 3 3 0 000 6z"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"clipRule"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"evenodd"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" />"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" </"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"svg"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" } "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"title"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"Theme Configuration"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"href"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"/docs/docs-theme/theme-configuration"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" </"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Card"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Card"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"icon"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"{"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"svg"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"width"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"24"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"viewBox"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"0 0 20 20"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"fill"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"currentColor"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"path"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"d"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"M11 17a1 1 0 001.447.894l4-2A1 1 0 0017 15V9.236a1 1 0 00-1.447-.894l-4 2a1 1 0 00-.553.894V17zM15.211 6.276a1 1 0 000-1.788l-4.764-2.382a1 1 0 00-.894 0L4.789 4.488a1 1 0 000 1.788l4.764 2.382a1 1 0 00.894 0l4.764-2.382zM4.447 8.342A1 1 0 003 9.236V15a1 1 0 00.553.894l4 2A1 1 0 009
117v-5.764a1 1 0 00-.553-.894l-4-2z"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" />"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" </"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"svg"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" } "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"title"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"Components"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"href"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"/docs/docs-theme/components"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" </"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Card"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"</"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Cards"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:" "})]})}),"\n",(0,n.jsxs)(v.o,{children:[(0,n.jsx)(v.Z,{icon:(0,n.jsx)(e.svg,{width:"24",viewBox:"0 0 20 20",fill:"currentColor",children:(0,n.jsx)(e.path,{d:"M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"})}),title:"Get Started",href:"/docs/docs-theme/start"}),(0,n.jsx)(v.Z,{icon:(0,n.jsx)(e.svg,{width:"24",viewBox:"0 0 20 20",fill:"currentColor",children:(0,n.jsx)(e.path,{d:"M7 3a1 1 0 000 2h6a1 1 0 100-2H7zM4 7a1 1 0 011-1h10a1 1 0 110 2H5a1 1 0 01-1-1zM2 11a2 2 0 012-2h12a2 2 0 012 2v4a2 2 0 01-2 2H4a2 2 0 01-2-2v-4z"})}),title:"Page Configuration",href:"/docs/docs-theme/page-configuration"}),(0,n.jsx)(v.Z,{icon:(0,n.jsx)(e.svg,{width:"24",viewBox:"0 0 20 20",fill:"currentColor",children:(0,n.jsx)(e.path,{fillRule:"evenodd",d:"M11.49 3.17c-.38-1.56-2.6-1.56-2.98 0a1.532 1.532 0 01-2.286.948c-1.372-.836-2.942.734-2.106 2.106.54.886.061 2.042-.947 2.287-1.561.379-1.561 2.6 0 2.978a1.532 1.532 0 01.947 2.287c-.836 1.372.734 2.942 2.106 2.106a1.532 1.532 0 012.287.947c.379 1.561 2.6 1.561 2.978 0a1.533 1.533 0 012.287-.947c1.372.836 2.942-.734 2.106-2.106a1.533 1.533 0 01.947-2.287c1.561-.379 1.561-2.6 0-2.978a1.532 1.532 0 01-.947-2.287c.836-1.372-.734-2.942-2.106-2.106a1.532 1.532 0 01-2.287-.947zM10 13a3 3 0 100-6 3 3 0 000 6z",clipRule:"evenodd"})}),title:"Theme Configuration",href:"/docs/docs-theme/theme-configuration"}),(0,n.jsx)(v.Z,{icon:(0,n.jsx)(e.svg,{width:"24",viewBox:"0 0 20 20",fill:"currentColor",children:(0,n.jsx)(e.path,{d:"M11 17a1 1 0 001.447.894l4-2A1 1 0 0017 15V9.236a1 1 0 00-1.447-.894l-4 2a1 1 0 00-.553.894V17zM15.211 6.276a1 1 0 000-1.788l-4.764-2.382a1 1 0 00-.894 0L4.789 4.488a1 1 0 000 1.788l4.764 2.382a1 1 0 00.894 0l4.764-2.382zM4.447 8.342A1 1 0 003 9.236V15a1 1 0 00.553.894l4 2A1 1 0 009
117v-5.764a1 1 0 00-.553-.894l-4-2z"})}),title:"Components",href:"/docs/docs-theme/components"})]}),"\n",(0,n.jsxs)(e.ul,{children:["\n",(0,n.jsx)(e.li,{children:"Setting SVG Icon"}),"\n"]}),"\n",(0,n.jsx)(e.pre,{"data-language":"mdx","data-theme":"default",hasCopyCode:!0,children:(0,n.jsxs)(e.code,{"data-language":"mdx","data-theme":"default",children:[(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"<"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Cards"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"svg"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"width"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"24"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"viewBox"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"0 0 20 20"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"fill"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"currentColor"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"path"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"fillRule"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"evenodd"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"d"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"M11.49 3.17c-.38-1.56-2.6-1.56-2.98 0a1.532 1.532 0 01-2.286.948c-1.372-.836-2.942.734-2.106 2.106.54.886.061 2.042-.947 2.287-1.561.379-1.561 2.6 0 2.978a1.532 1.532 0 01.947 2.287c-.836 1.372.734 2.942 2.106 2.106a1.532 1.532 0 012.287.947c.379 1.561 2.6 1.561 2.978 0a1.533 1.533 0 012.287-.947c1.372.836 2.942-.734 2.106-2.106a1.533 1.533 0 01.947-2.287c1.561-.379 1.561-2.6 0-2.978a1.532 1.532 0 01-.947-2.287c.836-1.372-.734-2.942-2.106-2.106a1.532 1.532 0 01-2.287-.947zM10 13a3 3 0 100-6 3 3 0 000 6z"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"clipRule"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"evenodd"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" />"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" </"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"svg"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"</"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Cards"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]})]})}),"\n",(0,n.jsx)(v.o,{children:(0,n.jsx)("svg",{width:"24",viewBox:"0 0 20 20",fill:"currentColor",children:(0,n.jsx)("path",{fillRule:"evenodd",d:"M11.49 3.17c-.38-1.56-2.6-1.56-2.98 0
1a1.532 1.532 0 01-2.286.948c-1.372-.836-2.942.734-2.106 2.106.54.886.061 2.042-.947 2.287-1.561.379-1.561 2.6 0 2.978a1.532 1.532 0 01.947 2.287c-.836 1.372.734 2.942 2.106 2.106a1.532 1.532 0 012.287.947c.379 1.561 2.6 1.561 2.978 0a1.533 1.533 0 012.287-.947c1.372.836 2.942-.734 2.106-2.106a1.533 1.533 0 01.947-2.287c1.561-.379 1.561-2.6 0-2.978a1.532 1.532 0 01-.947-2.287c.836-1.372-.734-2.942-2.106-2.106a1.532 1.532 0 01-2.287-.947zM10 13a3 3 0 100-6 3 3 0 000 6z",clipRule:"evenodd"})})}),"\n",(0,n.jsx)("h3",{className:"text-center font-extrabold md:text-1xl mt-8",children:"Toggle Card import ToggleCard from 'docs-theme'"}),"\n",(0,n.jsx)(e.pre,{"data-language":"mdx","data-theme":"default",hasCopyCode:!0,children:(0,n.jsxs)(e.code,{"data-language":"mdx","data-theme":"default",children:[(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" switchIcon "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'@components/icons/switch'"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:" "}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"<"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Cards"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Card"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"icon"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"{switchIcon} "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"title"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"Configure Docs Theme"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"href"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"/docs/docs-theme/configuration"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"/>"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"</"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Cards"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]})]})}),"\n","\n",(0,n.jsx)(v.o,{children:(0,n.jsx)(v.Z,{icon:u.Z,title:"Configure Docs Theme",href:"/docs/docs-theme/configuration"})}),"\n",(0,n.jsx)(e.h2,{id:"f-markdown",children:"f. Markdown"}),"\n",(0,n.jsx)(e.h3,{id:"text",children:"Text"}),"\n",(0,n.jsx)(e.h4,{id:"middle-heading-with-css",children:"Middle Heading with CSS"}),"\n",(0,n.jsx)(e.pre,{"data-language":"text","data-theme":"default",hasCopyCode:!0,children:(0,n.jsx)(e.code,{"data-language":"text","data-theme":"default",children:(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:'<h3 className="text-center font-extrabold md:text-5xl mt-8">CodeXam</h3>'})})})}),"\n",(0,n.jsx)("h3",{className:"text-center font-extrabold md:text-5xl mt-8",children:"CodeXam"}),"\n",(0,n.jsx)(e.h3,{id:"mdx-with-react-components",children:"MDX with React Components"}),"\n",(0,n.jsxs)(e.p,{children:["All your ",(0,n.jsx)(e.code,{children:".mdx"})," files under the pages directory will be rendered with ",(0,n.jsx)(e.a,{href:"https://mdxjs.com/about",children:"MDX"}),", it's an\nadvanced Markdown format with React component support."]}
1),"\n",(0,n.jsx)(e.p,{children:"For example, you can use import and use React components inside your Markdown files like this:"}),"\n","\n",(0,n.jsx)(e.pre,{"data-language":"mdx","data-theme":"default",filename:"Markdown",hasCopyCode:!0,children:(0,n.jsxs)(e.code,{"data-language":"mdx","data-theme":"default",children:[(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"## Hello MDX"})}),"\n",(0,n.jsx)(e.span,{className:"line",children:" "}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" { useState } "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'react'"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:" "}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"export"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"function"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"Counter"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"({ children }) {"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" ["}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"count"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"setCount"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"] "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"useState"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"("}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"0"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:")"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"return"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"button"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"onClick"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"{() "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"setCount"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"(count "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"+"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"1"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:")}>"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" {children}{count}"})}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" </"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"button"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"}"})}),"\n",(0,n.jsx)(e.span,{className:"line",children:" "}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"<"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Counter"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">**Clicks**: </"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Counter"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]})]})}),"\n",(0,n.jsx)(e.pre,{"data-language":"mdx","data-theme":"default",filename:"React Output in Markdown",hasCopyCode:!0,children:(0,n.jsxs)(e.code,{"data-language":"mdx","data-theme":"default",children:[(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" { useState } "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'react'"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" { Shadow } "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'@components/utils/shadow'"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:" "}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"export"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"function"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"Counter"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"({ children }) {"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" ["}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"count"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"setCount"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"] "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"useState"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"("}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"0"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:")"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"return"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"button"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"onClick"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"{() "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"setCount"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"(count "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"+"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"1"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:")}>{children}{count}</"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"button"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"}"})}),"\n",(0,n.jsx)(e.span,{className:"line",children:" "}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"<"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"className"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"p-4 border border-gray-200 dark:border-gray-900 rounded mt-6"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Shadow"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"mode"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"open"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"h2"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">Hello MDX</"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"h2"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Counter"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">**Clicks**: </"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Counter"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" </"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Shadow"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"</"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]})]})}),"\n",(0,n.jsx)(e.p,{children:"Preview:"}),"\n","\n","\n",(0,n.jsx)("div",{className:"p-4 border border-gray-200 dark:border-gray-900 rounded mt-6",children:(0,n.jsxs)(b,{mode:"open",children:[(0,n.jsx)("h2",{children:"Hello MDX"}),(0,n.jsxs)(A,{children:[(0,n.jsx)(e.strong,{children:"Clicks"}),": "]})]})}),"\n",(0,n.jsx)(e.p,{children:"Besides basic MDX, some advanced Markdown features built-in."}),"\n",(0,n.jsx)(e.h3,{id:"github-flavored-markdown",children:"GitHub Flavored Markdown"}),"\n",(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.a,{href:"https://github.github.com/gfm",children:"GFM"})," is an extension of Markdown, created by GitHub, that adds support for strikethrough, task lists, tables, and more."]}),"\n",(0,n.jsx)(e.h4,{id:"strikethrough",children:"Strikethrough"}),"\n",(0,n.jsx)(e.p,{children:(0,n.jsx)(e.del,{children:"removed"})}),"\n",(0,n.jsx)(e.pre,{"data-language":"md","data-theme":"default",filename:"Markdown",hasCopyCode:!0,children:(0,n.jsx)(e.code,{"data-language":"md","data-theme":"default",children:(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"~~removed~~"})})})}),"\n",(0,n.jsx)(e.h4,{id:"task-list",children:"Task List"}),"\n",(0,n.jsxs)(e.ul,{className:"contains-task-list",children:["\n",(0,n.jsxs)(e.li,{className:"task-list-item",children:[(0,n.jsx)(e.input,{type:"checkbox",checked:!0,disabled:!0})," ","Write the press release"]}),"\n",(0,n.jsxs)(e.li,{className:"task-list-item",children:[(0,n.jsx)(e.input,{type:"checkbox",disabled:!0})," ","Update the website"]}),"\n",(0,n.jsxs)(e.li,{className:"task-list-item",children:[(0,n.jsx)(e.input,{type:"checkbox",disabled:!0})," ","Contact the media"]}),"\n"]}),"\n",(0,n.jsx)(e.pre,{"data-language":"md","data-theme":"default",filename:"Markdown",hasCopyCode:!0,children:(0,n.jsxs)(e.code,{"data-language":"md","data-theme":"default",children:[(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"- ["}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"x"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"] Write the press release"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"- [ ] Update the website"})}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"- [ ] Contact the media"})})]})}),"\n",(0,n.jsx)(e.h3,{id:"table",children:"Table"}),"\n",(0,n.jsxs)(e.table,{children:[(0,n.jsx)(e.thead,{children:(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.th,{align:"left",children:"Syntax"}),(0,n.jsx)(e.th,{align:"center",children:"Description"}),(0,n.jsx)(e.th,{align:"right",children:"Test Text"})]})}),(0,n.jsxs)(e.tbody,{children:[(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{align:"left",children:"Header"}),(0,n.jsx)(e.td,{align:"center",children:"Title"}),(0,n.jsx)(e.td,{align:"right",children:"Here's this"})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{align:"left",children:"Paragraph"}),(0,n.jsx)(e.td,{align:"center",children:"Text"}),(0,n.jsx)(e.td,{align:"right",children:"And more"})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{align:"left",children:"Strikethrough"}),(0,n.jsx)(e.td,{align:"center"}),(0,n.jsx)(e.td,{align:"right",children:(0,n.jsx)(e.del,{children:"Text"})})]})]})]}),"\n",(0,n.jsx)(e.pre,{"data-language":"md","data-theme":"default",filename:"Markdown",hasCopyCode:!0,children:(0,n.jsxs)(e.code,{"data-language":"md","data-theme":"default",children:[(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"| Syntax | Description | Test Text |"})}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"| :------------ | :---------: | ----------: |"})}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"| Hea
1der | Title | Here's this |"})}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"| Paragraph | Text | And more |"})}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"| Strikethrough | | ~~Text~~ |"})})]})}),"\n",(0,n.jsx)(e.h3,{id:"autolinks",children:"Autolinks"}),"\n",(0,n.jsxs)(e.p,{children:["Visit ",(0,n.jsx)(e.a,{href:"https://nextjs.org",children:"https://nextjs.org"}),"."]}),"\n",(0,n.jsx)(e.pre,{"data-language":"md","data-theme":"default",hasCopyCode:!0,children:(0,n.jsx)(e.code,{"data-language":"md","data-theme":"default",children:(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"Visit https://nextjs.org."})})})}),"\n",(0,n.jsx)(e.h3,{id:"custom-table-feature",children:"Custom Table Feature"}),"\n",(0,n.jsx)(e.pre,{"data-language":"mdx","data-theme":"default",hasCopyCode:!0,children:(0,n.jsxs)(e.code,{"data-language":"mdx","data-theme":"default",children:[(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" { OptionTable } "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'components/table'"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:" "}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"<"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"OptionTable"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"options"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"{["})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" ["}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'project.link'"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'string'"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'URL of the project homepage.'"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"]"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" ["}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'project.icon'"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'React.ReactNode | React.FC'"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Icon or element of the project link.'"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"]"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"]}/>"})})]})}),"\n",(0,n.jsx)(M,{options:[["project.link","string","URL of the project homepage."],["project.icon","React.ReactNode | React.FC","Icon or element of the project link."]]}),"\n",(0,n.jsx)(e.h3,{id:"code-block",children:"Code Block"}),"\n",(0,n.jsx)(e.h4,{id:"extended-syntax-highlighting",children:"Extended Syntax Highlighting"}),"\n",(0,n.jsx)(e.p,{children:"CodeXam supports automatic syntax highlighting:"}),"\n",(0,n.jsx)(e.pre,{"data-language":"js","data-theme":"default",hasCopyCode:!0,children:(0,n.jsx)(e.code,{"data-language":"js","data-theme":"default",children:(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"console"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".log"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"("}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'hello, world'"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:")"})]})})}),"\n",(0,n.jsx)(e.pre,{"data-language":"md","data-theme":"default",filename:"Markdown",hasCopyCode:!0,children:(0,n.jsxs)(e.code,{"data-language":"md","data-theme":"default",children:[(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string)"},children:"```js"})}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"console"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".log"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"("}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'hello, world'"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:")"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string)"},children:"```"})})]})}),"\n",(0,n.jsxs)(e.p,{children:["Inlined syntax highlighting is also supported ",(0,n.jsx)(e.span,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(e.code,{"data-language":"jsx","data-theme":"default",children:(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"let"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" x "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"1"})]})})})," via:"]}),"\n",(0,n.jsx)(e.pre,{"data-language":"md","data-theme":"default",filename:"Markdown",hasCopyCode:!0,children:(0,n.jsx)(e.code,{"data-language":"md","data-theme":"default",children:(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"Inlined syntax highlighting is also supported "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string)"},children:"`let x = 1{:jsx}`"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" via:"})]})})}),"\n",(0,n.jsx)(e.h4,{id:"file-type-in-code-blocks",children:"File type in code blocks"}),"\n",(0,n.jsx)(e.p,{children:"You can also specify the file type in code blocks, which will be used to render the file name in the top right corner of the code block."}),"\n",(0,n.jsx)(e.pre,{"data-language":"js","data-theme":"default",filename:"pages/index.js",hasCopyCode:!0,children:(0,n.jsxs)(e.code,{"data-language":"js","data-theme":"default",children:[(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"export"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"default"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"function"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"Home"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"}
1,children:"() {"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"return"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"h1"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">Hello World</"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"h1"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"}"})})]})}),"\n",(0,n.jsx)(e.pre,{"data-language":"md","data-theme":"default",filename:"Markdown",hasCopyCode:!0,children:(0,n.jsxs)(e.code,{"data-language":"md","data-theme":"default",children:[(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string)"},children:'```js filename="pages/index.js"'})}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"export"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"default"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"function"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"Home"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"() {"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"return"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"h1"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">Hello World</"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"h1"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"}"})}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string)"},children:"```"})})]})}),"\n",(0,n.jsx)(e.h4,{id:"tab-groups-in-code-blocks",children:"Tab Groups in code blocks"}),"\n",(0,n.jsx)(e.p,{children:"You can also specify the tab groups in code blocks, which will be used to render the tab groups in the top right corner of the code block."}),"\n",(0,n.jsxs)(e.ul,{children:["\n",(0,n.jsxs)(e.li,{children:["We can also disabled the tab using true false . True means disable and false means enable ",(0,n.jsx)(e.code,{children:"{label:'C', disabled: true},"})]}),"\n"]}),"\n",(0,n.jsx)(e.pre,{"data-language":"jsx","data-theme":"default",hasCopyCode:!0,children:(0,n.jsxs)(e.code,{"data-language":"jsx","data-theme":"default",children:[(0,n.jsx)(e.span,{className:"line",children:" "}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" {Tabs"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" Tab} "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'nextra-theme-docs'"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:" "}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"<"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Tabs"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"items"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"{["}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'JavaScript'"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'C++'"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" {label"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'C'"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" disabled"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"true"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"}"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Python'"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"]} "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"defaultIndex"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"{"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"1"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"}>"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:" "}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"<"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Tab"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:'```java filename="CodeXam.java"'})}),"\n",(0,n.jsx)(e.span,{className:"line",children:" "}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"```"})}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"</"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Tab"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"<"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Tab"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:" "}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:'```cpp filename="CodeXam.cpp"'})}),"\n",(0,n.jsx)(e.span,{className:"line",children:" "}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"```"})}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"</"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Tab"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:" "}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"<"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Tab"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:'```c filename="CodeXam.c"'})}),"\n",(0,n.jsx)(e.span,{className:"line",children:" "}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"```"})}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"</"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Tab"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:" "}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"<"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Tab"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:" "}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:'```python filename="CodeXam.python"'})}),"\n",(0,n.jsx)(e.span,{className:"line",children:" "}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"```"})}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"</"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Tab"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"</"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Tabs"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]})]})}),"\n","\n",(0,n.jsxs)(t.mQ,{items:["JavaScript","C++",{label:"C",disabled:!0},"Python"],defaultIndex:1,children:[(0,n.jsx)(t.OK,{children:(0,n.jsx)(e.pre,{"data-language":"js","data-theme":"default",filename:"hi.js",hasCopyCode:!0,children:(0,n.jsx)(e.code,{"data-language":"js","data-theme":"default",children:(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" { useState"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" useEffect } "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'react'"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:";"})]})})})}),(0,n.jsx)(t.OK,{children:(0,n.jsx)(e.pre,{"data-language":"cpp","data-theme":"default",filename:"hi.cpp",hasCopyCode:!0,children:(0,n.jsx)(e.code,{"data-language":"cpp","data-theme":"default",children:(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"#include"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"<iostream>"})]})})})}),(0,n.jsx)(t.OK,{children:(0,n.jsx)(e.pre,{"data-language":"c","data-theme":"default",filename:"hi.c",hasCopyCode:!0,children:(0,n.jsx)(e.code,{"data-language":"c","data-theme":"default",children:(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"#include"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"<stdio.h>"})]})})})}),(0,n.jsx)(t.OK,{children:(0,n.jsx)(e.pre,{"data-language":"python","data-theme":"default",filename:"hi.python",hasCopyCode:!0,children:(0,n.jsx)(e.code,{"data-language":"python","data-theme":"default",children:(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"print"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:"(CodeXam)"})]})})})})]}),"\n",(0,n.jsx)(e.h4,{id:"highlight-in-code-blocks",children:"Highlight in code blocks"}),"\n",(0,n.jsx)(e.pre,{"data-language":"jsx","data-theme":"default",hasCopyCode:!0,children:(0,n.jsxs)(e.code,{"data-language":"jsx","data-theme":"default",children:[(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:"// page component"})}),"\n",(0,n.jsx)(e.span,{className:"line",children:" "}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"function"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"Page"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" () {"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" ["}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"user"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"setUser"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"] "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"useState"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"("}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"null"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:")"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:" "}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:"// fetch data"})]}),"\n",(0,n.jsxs)(e.span,{className:"line highlighted",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"useEffect"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"(() "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" {"})]}),"\n",(0,n.jsxs)(e.span,{className:"line highlighted",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"fetch"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"("}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'/api/user'"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:")"})]}),"\n",(0,n.jsxs)(e.span,{className:"line highlighted",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".then"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},
1children:"(res "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"res"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".json"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"())"})]}),"\n",(0,n.jsxs)(e.span,{className:"line highlighted",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".then"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"(data "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"setUser"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"(data))"})]}),"\n",(0,n.jsxs)(e.span,{className:"line highlighted",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" }"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" [])"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:" "}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:"// global loading state"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"if"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" ("}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"!"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"user) "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"return"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Spinner"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"/>"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:" "}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"return"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line highlighted",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Navbar"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"user"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"{user} />"})]}),"\n",(0,n.jsxs)(e.span,{className:"line highlighted",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Content"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"user"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"{user} />"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" </"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"}"})}),"\n",(0,n.jsx)(e.span,{className:"line",children:" "}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:"// child components"})}),"\n",(0,n.jsx)(e.span,{className:"line",children:" "}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"function"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"Navbar"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" ({ user }) {"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"return"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" ..."})}),"\n",(0,n.jsxs)(e.span,{className:"line highlighted",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Avatar"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"user"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"{user} />"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" </"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"}"})}),"\n",(0,n.jsx)(e.span,{className:"line",children:" "}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"function"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"Content"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" ({ user }) {"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"return"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"h1"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">Welcome back, {"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"user"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:".name}</"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"h1"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"}"})}),"\n",(0,n.jsx)(e.span,{className:"line",children:" "}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"function"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"Avatar"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" ({ user }) {"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"return"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"img"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"src"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"{"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"user"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:".avatar} "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"alt"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"{"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"user"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:".name} />"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"}"})})]})}),"\n",(0,n.jsx)(e.h2,{id:"g-nextjs-ssg",children:"g. Nextjs SSG"}),"\n",(0,n.jsxs)(e.p,{children:["With Next.js, you can pre-render your page using ",(0,n.jsx)(e.a,{href:"https://nextjs.org/docs/basic-features/pages#static-generation-recommended",children:"Static Generation (SSG)"}),". Your pages will be generated at build time and statically served to visitors. It c
1an also be cached by a CDN to maximize the performance."]}),"\n",(0,n.jsx)(e.h3,{id:"repo-star-count",children:"Repo Star Count"}),"\n","\n","\n","\n",(0,n.jsx)("div",{className:"p-4 border border-gray-200 dark:border-gray-900 rounded mt-6",children:(0,n.jsxs)(e.p,{children:["CodeXam has ",(0,n.jsx)(L,{})," stars on GitHub!"]})}),"\n",(0,n.jsxs)(e.p,{children:["The number above was generated at build time via ",(0,n.jsx)(e.code,{children:"getStaticProps"}),". With ",(0,n.jsx)(e.a,{href:"https://nextjs.org/docs/basic-features/data-fetching#incremental-static-regeneration",children:"Incremental Static Regeneration"})," enabled, it will be kept up to date."]}),"\n",(0,n.jsx)(e.p,{children:"Here's the MDX code for the example above:"}),"\n",(0,n.jsx)(e.pre,{"data-language":"mdx","data-theme":"default",hasCopyCode:!0,children:(0,n.jsxs)(e.code,{"data-language":"mdx","data-theme":"default",children:[(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" { useSSG } "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'nextra/ssg'"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:" "}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"export"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"getStaticProps"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" ({ params }) "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" {"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"return"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"fetch"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"("}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"`https://api.github.com/repos/Subham-Maity/StockOfSentence`"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:")"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".then"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"(res "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"res"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".json"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"())"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".then"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"(repo "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" ({"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" props"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" {"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:"// We add an `ssg` field to the page props,"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:"// which will be provided to the `useSSG` hook."})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" ssg"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" {"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" stars"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"repo"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:".stargazers_count"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" }"})}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" }"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:"// The page will be considered as stale and regenerated every 60 seconds."})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" revalidate"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"60"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" }))"})}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"}"})}),"\n",(0,n.jsx)(e.span,{className:"line",children:" "}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"export"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"Stars"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" () "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" {"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:"// Get the data from SSG, and render it as a component."})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" { "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"stars"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" } "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"useSSG"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"}
1,children:"()"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"return"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"strong"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">{stars}</"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"strong"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"}"})})]})}),"\n",(0,n.jsx)(e.h2,{id:"h-nextjs-i18n",children:"h. Nextjs I18n"}),"\n",(0,n.jsxs)(e.p,{children:["CodeXam supports ",(0,n.jsx)(e.a,{href:"https://nextjs.org/docs/advanced-features/i18n-routing",children:"Next.js Internationalized Routing"})," out of the box. You can create a new locale by creating a new folder in the ",(0,n.jsx)(e.code,{children:"pages"})," directory, and adding a ",(0,n.jsx)(e.code,{children:"next.config.js"})," file to the root of your project."]}),"\n",(0,n.jsx)(e.h3,{id:"nextconfigmjs",children:"next.config.mjs"}),"\n",(0,n.jsx)(e.pre,{"data-language":"js","data-theme":"default",filename:"next.config.mjs",hasCopyCode:!0,children:(0,n.jsxs)(e.code,{"data-language":"js","data-theme":"default",children:[(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" nextra "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'nextra'"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:" "}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"withNextra"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"nextra"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"({"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" theme"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'nextra-theme-docs'"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" themeConfig"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'./theme.config.tsx'"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" unstable_staticImage"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"true"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" unstable_flexsearch"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" {"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" codeblocks"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"true"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" }"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" unstable_defaultShowCopyCode"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"true"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"})"})}),"\n",(0,n.jsx)(e.span,{className:"line",children:" "}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"export"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"default"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"withNextra"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"({"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" reactStrictMode"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"true"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" experimental"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" { images"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" { allowFutureImage"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"true"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" } }"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"})"})})]})}
1),"\n",(0,n.jsx)(e.p,{children:"Then, add the locale codes to your file extensions (required for the default locale too):"}),"\n",(0,n.jsx)(e.pre,{"data-language":"plaintext","data-theme":"default",hasCopyCode:!0,children:(0,n.jsxs)(e.code,{"data-language":"plaintext","data-theme":"default",children:[(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"/pages"})}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" _meta.en.json"})}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" _meta.zh.json"})}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" _meta.de.json"})}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" index.en.md"})}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" index.zh.md"})}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" index.de.md"})}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" ..."})})]})}),"\n",(0,n.jsx)(e.h3,{id:"language-dropdown",children:"language dropdown:"}),"\n",(0,n.jsxs)(e.p,{children:["Finally, add the ",(0,n.jsx)(e.code,{children:"i18n"})," option to your ",(0,n.jsx)(e.code,{children:"theme.config.jsx"})," to configure the language dropdown:"]}),"\n",(0,n.jsx)(e.pre,{"data-language":"jsx","data-theme":"default",filename:"theme.config.jsx",hasCopyCode:!0,children:(0,n.jsxs)(e.code,{"data-language":"jsx","data-theme":"default",children:[(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"i18n"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" ["})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" { locale"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'en'"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" text"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'English'"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" }"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" { locale"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'zh'"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" text"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'ä¸æ'"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" }"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" { locale"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'de'"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" text"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Deutsch'"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" }"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" { locale"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'ar'"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" text"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'اÙعربÙØ©'"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" direction"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'rtl'"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" }"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"]"})})]})}),"\n",(0,n.jsx)(e.h2,{id:"i-nextjs-image",children:"i. Nextjs Image"}),"\n",(0,n.jsxs)(e.p,{children:["The standard way to use ",(0,n.jsx)(e.a,{href:"https://nextjs.org/docs/basic-features/image-optimization",children:"Next.js Image"})," inside MDX is to directly import the component:"]}),"\n",(0,n.jsx)(e.h3,{id:"import-image-from-folder",children:"Import Image from folder"}),"\n",(0,n.jsx)(e.pre,{"data-language":"mdx","data-theme":"default",hasCopyCode:!0,children:(0,n.jsxs)(e.code,{"data-language":"mdx","data-theme":"default",children:[(0,n.jsx)(e.span,{className:"line",children:" "}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" Image "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'next/image'"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:" "}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"<"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Image"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"src"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"/demo.png"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"alt"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"Hello"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"width"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"{"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"500"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"} "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"height"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"{"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"500"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"} />"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:" "})]})}),"\n","\n",(0,n.jsx)(x(),{src:"/demo.png",alt:"Hello",width:600,height:500}),"\n",(0,n.jsx)(e.h3,{id:"image-using-link",children:"Image Using Link"}),"\n",(0,n.jsx)(e.pre,{"data-language":"mdx","data-theme":"default",hasCopyCode:!0,children:(0,n.jsxs)(e.code,{"data-language":"mdx","data-theme":"default",children:[(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"<"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"p"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"align"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"center"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"img"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"src"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"pages/docs/about"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"/>"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"</"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"p"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]})]})}),"\n",(0,n.jsx)(e.pre,{"data-language":"mdx","data-theme":"default",hasCopyCode:!0,children:(0,n.jsxs)(e.code,{"data-language":"mdx","data-theme":"default",children:[(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"<"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"h1"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"> Hey, I am <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Link"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"href"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"pages/docs/about"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"target"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"_blank"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">Subham </"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Link"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"><"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"img"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:' src="'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string)"},children:"https://media.giphy.com/media/hvRJCLFzcasrR4ia7z/giphy.gif"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:'" width="32"></'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"h1"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]})]})}),"\n",(0,n.jsx)(e.h3,{id:"image-imports-with-the-markdown-syntax",children:"Image imports with the Markdown syntax"}),"\n",(0,n.jsxs)(e.p,{children:["You no longer need to specify the width and height of the image manually,but directly use the ",(0,n.jsx)(e.code,{children:"![]()"})," syntax to display the same image:"]}),"\n",(0,n.jsx)(e.pre,{"data-language":"md","data-theme":"default",filename:"index.mdx",hasCopyCode:!0,children:(0,n.jsx)(e.code,{"data-language":"md","data-theme":"default",children:(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"!["}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"Hello"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"]"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-link)"},children:"(../../../public/demo.png)"})]})})}),"\n",(0,n.jsx)(e.p,{children:"With Next.js Image, there will be no layout shift, and a beautiful blurry placeholder will be shown by default when loading the images:"}),"\n",(0,n.jsx)(e.h3,{id:"image-with-border",children:"Image with Border"}),"\n",(0,n.jsx)(e.pre,{"data-language":"mdx","data-theme":"default",hasCopyCode:!0,children:(0,n.jsxs)(e.code,{"data-language":"mdx","data-theme":"default",children:[(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"<"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"align"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"center"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"style"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"{{ border"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'5px solid #888'"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" padding"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'0rem 1rem'"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" textAlign"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--sh
1iki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'center'"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" borderRadius"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"20px"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" }}>"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:" "}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"p"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"align"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"center"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"img"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"src"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"https://github.com/Subham-Maity/Data-Structures-and-Algorithms-For-Beginners/raw/main/0.3.%20~%C2%A9CodeXam~DataStructures%20Roadmap/ss.png"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"/>"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" </"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"p"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:" "}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" </"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:" "}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"</"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]})]})}),"\n",(0,n.jsx)("div",{align:"center",children:(0,n.jsx)("div",{style:{border:"5px solid #888",padding:"0rem 1rem",textAlign:"center",borderRadius:"20px"},children:(0,n.jsx)("p",{align:"center",children:(0,n.jsx)("img",{src:"https://github.com/Subham-Maity/Data-Structures-and-Algorithms-For-Beginners/raw/main/0.3.%20~%C2%A9CodeXam~DataStructures%20Roadmap/ss.png"})})})}),"\n",(0,n.jsx)(e.h2,{id:"j-step-design-for-guide",children:"j. Step Design for Guide"}),"\n",(0,n.jsx)(e.pre,{"data-language":"mdx","data-theme":"default",hasCopyCode:!0,children:(0,n.jsxs)(e.code,{"data-language":"mdx","data-theme":"default",children:[(0,n.jsx)(e.span,{className:"line",children:" "}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" { Callout"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" Tab"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" Tabs } "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'nextra-theme-docs'"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:" "}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"<"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"className"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"steps-container"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"style"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"jsx"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">{"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"`"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" .steps-container {"})}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" margin-left: 1rem;"})}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" padding-left: 1.5rem;"})}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" counter-reset: step;"})}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" border-left: 1px solid;"})}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" border-color: rgb(229 231 235/1);"})}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" }"})}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" .steps-container :global(h3) {"})}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" counter-increment: step;"})}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" }"})}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" .steps-container :global(h3):before {"})}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" content: counter(step);"})}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" display: inline-block;"})}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" position: absolute;"})}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" margin-top: 3px;"})}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" margin-left: -41px;"})}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" width: 33px;"})}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" height: 33px;"})}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" text-align: center;"})}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" text-indent: -1px;"})}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" color: #999;"})}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" border-radius: 100%;"})}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" border: 4px solid #fff;"})}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" background: #f3f3f3;"})}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" line-height: 1.5rem;"})}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" font-size: 1rem;"})}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" font-weight: 400;"})}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" }"})}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" `"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"}</"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"style"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:" "}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" ### Install"})}),"\n",(0,n.jsx)(e.span,{className:"line",children:" "}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" Step 1: Install the package from npm or yarn using the following command:"})}),"\n",(0,n.jsx)(e.span,{className:"line",children:" "}),"\n",(0,n.jsx)(e.span,{className:"line",children:" "}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Tabs"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"items"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"{["}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'JavaScript'"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'C++'"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Python'"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"]}>"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Tab"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:' ```js filename="hi.js"'})}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"}
1,children:" import { useState"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" useEffect } from 'react';"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" ```"})}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" </"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Tab"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Tab"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:' ```cpp filename="hi.cpp"'})}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" #include <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"iostream"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" ```"})}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" </"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Tab"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Tab"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:' ```c filename="hi.c"'})}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" #include <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"stdio.h"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" ```"})}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" </"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Tab"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Tab"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:' ```c filename="hi.c"'})}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" #include <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"stdio.h"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" ```"})}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" </"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Tab"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" </"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Tabs"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:" "}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"}
1,children:" Like any Next.js projects, you need to also add `scripts` to your `package.json`:"})}),"\n",(0,n.jsx)(e.span,{className:"line",children:" "}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:' ```json filename="package.json" copy'})}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" {"})}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"scripts"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:": {"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"dev"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"next"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"build"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"next build"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"start"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"next start"'})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" }"})}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" }"})}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" ```"})}),"\n",(0,n.jsx)(e.span,{className:"line",children:" "}),"\n",(0,n.jsx)(e.span,{className:"line",children:" "}),"\n",(0,n.jsx)(e.span,{className:"line",children:" "}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" ### Create Config"})}),"\n",(0,n.jsx)(e.span,{className:"line",children:" "}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" Create the following `next.config.js` file in your projectâs root directory:"})}),"\n",(0,n.jsx)(e.span,{className:"line",children:" "}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:' ```cpp filename="next.config.js"'})}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" const withMDX = require('@next/mdx')({"})}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" extension:"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" /\\.mdx"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"?$"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"/"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"})"})}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" ```"})}),"\n",(0,n.jsx)(e.span,{className:"line",children:" "}),"\n",(0,n.jsx)(e.span,{className:"line",children:" "}),"\n",(0,n.jsx)(e.span,{className:"line",children:" "}),"\n",(0,n.jsx)(e.span,{className:"line",children:" "}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" ### Create Docs Theme Config"})}),"\n",(0,n.jsx)(e.span,{className:"line",children:" "}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" Lastly, create the corresponding `theme.config.jsx` file in your projectâs root directory:"})}),"\n",(0,n.jsx)(e.span,{className:"line",children:" "}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:' ```jsx filename="theme.config.jsx" copy'})}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" export default {"})}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" logo: <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"span"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">My CodeXam Documentation</"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"span"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:"// ..."})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"}"})}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" ```"})}),"\n",(0,n.jsx)(e.span,{className:"line",children:" "}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" More configuration options for the docs theme can be found here:"})}),"\n",(0,n.jsx)(e.span,{className:"line",children:" "}),"\n",(0,n.jsx)(e.span,{className:"line",children:" "}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" ### Ready to Go!"})}),"\n",(0,n.jsx)(e.span,{className:"line",children:" "}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" Now, you can create an initial MDX page:"})}),"\n",(0,n.jsx)(e.span,{className:"line",children:" "}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:' ```mdx filename="pages/index.mdx" copy'})}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" # Welcome to CodeXam"})}),"\n",(0,n.jsx)(e.span,{className:"line",children:" "}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" Hello, world!"})}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" ```"})}),"\n",(0,n.jsx)(e.span,{className:"line",children:" "}),"\n",(0,n.jsx)(e.span,{className:"line",children:" "}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"</"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]})]})}),"\n",(0,n.jsxs)("div",{className:"jsx-9391bda29ef35dd7 steps-container",children:[(0,n.jsx)(l(),{id:"9391bda29ef35dd7",children:".steps-container.jsx-9391bda29ef35dd7{margin-left:1rem;padding-left:1.5rem;counter-reset:step;border-left:1px solid;border-color:rgb(229 231 235/1)}.steps-container.jsx-9391bda29ef35dd7 h3{counter-increment:step}.steps-container.jsx-9391bda29ef35dd7 h3:before{content:counter(step);display:inline-block;position:absolute;margin-top:3px;margin-left:-41px;width:33px;
1height:33px;text-align:center;text-indent:-1px;color:#999;-webkit-border-radius:100%;-moz-border-radius:100%;border-radius:100%;border:4px solid#fff;background:#f3f3f3;line-height:1.5rem;font-size:1rem;font-weight:400}"}),(0,n.jsx)(e.h3,{id:"install",children:"Install"}),(0,n.jsx)(e.p,{children:"Step 1: Install the package from npm or yarn using the following command:"}),(0,n.jsxs)(t.mQ,{items:["JavaScript","C++","Python"],children:[(0,n.jsx)(t.OK,{children:(0,n.jsx)(e.pre,{"data-language":"js","data-theme":"default",filename:"hi.js",hasCopyCode:!0,children:(0,n.jsx)(e.code,{"data-language":"js","data-theme":"default",children:(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" { useState"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" useEffect } "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'react'"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:";"})]})})})}),(0,n.jsx)(t.OK,{children:(0,n.jsx)(e.pre,{"data-language":"cpp","data-theme":"default",filename:"hi.cpp",hasCopyCode:!0,children:(0,n.jsx)(e.code,{"data-language":"cpp","data-theme":"default",children:(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"#include"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"<iostream>"})]})})})}),(0,n.jsx)(t.OK,{children:(0,n.jsx)(e.pre,{"data-language":"c","data-theme":"default",filename:"hi.c",hasCopyCode:!0,children:(0,n.jsx)(e.code,{"data-language":"c","data-theme":"default",children:(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"#include"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"<stdio.h>"})]})})})}),(0,n.jsx)(t.OK,{children:(0,n.jsx)(e.pre,{"data-language":"c","data-theme":"default",filename:"hi.c",hasCopyCode:!0,children:(0,n.jsx)(e.code,{"data-language":"c","data-theme":"default",children:(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"#include"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"<stdio.h>"})]})})})})]}),(0,n.jsxs)(e.p,{children:["Like any Next.js projects, you need to also add ",(0,n.jsx)(e.code,{children:"scripts"})," to your ",(0,n.jsx)(e.code,{children:"package.json"}),":"]}),(0,n.jsx)(e.pre,{"data-language":"json","data-theme":"default",filename:"package.json",hasCopyCode:!0,children:(0,n.jsxs)(e.code,{"data-language":"json","data-theme":"default",children:[(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"{"})}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:'"scripts"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" {"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:'"dev"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"next"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:'"build"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"next build"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:'"start"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"next start"'})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"}"})}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"}"})})]})}),(0,n.jsx)(e.h3,{id:"create--config",children:"Create Config"}),(0,n.jsxs)(e.p,{children:["Create the following ",(0,n.jsx)(e.code,{children:"next.config.js"})," file in your projectâs root directory:"]}),(0,n.jsx)(e.pre,{"data-language":"cpp","data-theme":"default",filename:"next.config.js",hasCopyCode:!0,children:(0,n.jsxs)(e.code,{"data-language":"cpp","data-theme":"default",children:[(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" withMDX "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"require"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"("}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'@next/mdx'"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:")({"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"extension"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"/"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"\\.mdx"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"?"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"$"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"/"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"})"})})]})}),(0,n.jsx)(e.h3,{id:"create-docs-theme-config",children:"Create Docs Theme Config"}),(0,n.jsxs)(e.p,{children:["Lastly, create the corresponding ",(0,n.jsx)(e.code,{children:"theme.config.jsx"})," file in your projectâs root directory:"]}),(0,n.jsx)(e.pre,{"data-language":"jsx","data-theme":"default",filename:"theme.config.jsx",hasCopyCode:!0,children:(0,n.jsxs)(e.code,{"data-language":"jsx","data-theme":"default",children:[(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"export"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"default"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" {"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"logo"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"span"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">My CodeXam Documentation</"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"span"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:"// ..."})}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"}"})})]})}),(0,n.jsx)(e.p,{children:"More configuration options for the docs theme can be found here:"}),(0,n.jsx)(e.h3,{id:"ready-to-go",children:"Ready to Go!"}),(0,n.jsx)(e.p,{children:"Now, you can create an initial MDX page:"}),(0,n.jsx)(e.pre,{"data-language":"mdx","data-theme":"default",filename:"pages/index.mdx",hasCopyCode:!0,children:(0,n.jsxs)(e.code,{"data-language":"mdx","data-theme":"default",children:[(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"# Welcome to CodeXam"})}),"\n",(0,n.jsx)(e.span,{className:"line",children:" "}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"Hello, world!"})})]})})]}),"\n",(0,n.jsx)(e.h2,{id:"k-theme-configuration",children:"k. Theme Configuration"}),"\n",(0,n.jsxs)(e.p,{children:["The theme is configured with the ",(0,n.jsx)(e.a,{href:"/docs/docs-theme/start#create-docs-theme-config",children:"theme.config.jsx"})," file. It should export an object that contains your configurations, for example:"]}),"\n",(0,n.jsx)(e.pre,{"data-language":"jsx","data-theme":"default",filename:"theme.config.jsx",hasCopyCode:!0,children:(0,n.jsxs)(e.code,{"data-language":"jsx","data-theme":"default",children:[(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"export"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"default"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" {"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" project"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" {"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" link"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'https://github.com/Subham-Maity'"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" }"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" logo"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"strong"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">Project</"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"strong"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" titleSuffix"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"' â Project'"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"}"})})]})}),"\n",(0,n.jsx)(e.p,{children:"Detailed information for each option is listed below."}),"\n",(0,n.jsx)(e.h3,{id:"project-link",children:"Project Link"}),"\n",(0,n.jsx)(e.p,{children:"Show a button that links to your projectâs homepage on the navbar. By default, it links to CodeXamâs GitHub repository."}),"\n","\n",(0,n.jsx)(M,{options:[["project.link","string","URL of the project homepage."],["project.icon","React.ReactNode | React.FC","Icon or element of the project link."]]}),"\n",(0,n.jsx)(e.h4,{id:"use-a-custom-icon",children:"Use a custom icon"}),"\n",(0,n.jsxs)(e.p,{children:["You can configure ",(0,n.jsx)(e.code,{children:"project.link"})," and ",(0,n.jsx)(e.code,{children:"project.icon"})," to customize the project link, for example make it link to your GitLab repository:"]}),"\n",(0,n.jsx)(e.pre,{"data-language":"jsx","data-theme":"default",hasCopyCode:!0,children:(0,n.jsxs)(e.code,{"data-language":"jsx","data-theme":"default",children:[(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"export"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"default"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" {"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" project"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" {"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" link"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'https://gitlab.com/inkscape/inkscape'"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" icon"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"svg"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"width"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"24"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"height"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"24"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:
1"viewBox"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"0 0 256 256"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"><"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"path"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"fill"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"currentColor"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"d"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"m231.9 169.8l-94.8 65.6a15.7 15.7 0 0 1-18.2 0l-94.8-65.6a16.1 16.1 0 0 1-6.4-17.3L45 50a12 12 0 0 1 22.9-1.1L88.5 104h79l20.6-55.1A12 12 0 0 1 211 50l27.3 102.5a16.1 16.1 0 0 1-6.4 17.3Z"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"></"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"path"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"></"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"svg"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" }"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"}"})})]})}),"\n",(0,n.jsxs)(e.p,{children:["If ",(0,n.jsx)(e.code,{children:"icon"})," is missing, it will be a ",(0,n.jsx)(e.a,{href:"https://primer.style/octicons/mark-github-16",children:"GitHub icon"})," by default."]}),"\n",(0,n.jsx)(e.h3,{id:"chat-link",children:"Chat Link"}),"\n",(0,n.jsx)(e.p,{children:"Show a button that links to your projectâs forum or other social media on the navbar."}),"\n",(0,n.jsx)(M,{options:[["chat.link","string","URL of the chat link."],["chat.icon","React.ReactNode | React.FC","Icon or element of the chat link."]]}),"\n",(0,n.jsx)(e.h4,{id:"customize-chat-link",children:"Customize chat link"}),"\n",(0,n.jsxs)(e.p,{children:["You can configure ",(0,n.jsx)(e.code,{children:"chat.link"})," and ",(0,n.jsx)(e.code,{children:"chat.icon"})," to customize the chat link, for example make it link to your Twitter account:"]}),"\n",(0,n.jsx)(e.pre,{"data-language":"jsx","data-theme":"default",hasCopyCode:!0,children:(0,n.jsxs)(e.code,{"data-language":"jsx","data-theme":"default",children:[(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"export"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"default"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" {"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" chat"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" {"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" link"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'https://twitter.com/shuding'"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" icon"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"svg"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"width"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"24"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"height"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"24"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"viewBox"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"0 0 256 256"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"><"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"path"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"fill"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"currentColor"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"d"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"m231.9 169.8l-94.8 65.6a15.7 15.7 0 0 1-18.2 0l-94.8-65.6a16.1 16.1 0 0 1-6.4-17.3L45 50a12 12 0 0 1 22.9-1.1L88.5 104h79l20.6-55.1A12 12 0 0 1 211 50l27.3 102.5a16.1 16.1 0 0 1-6.4 17.3Z"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"></"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"path"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"></"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"svg"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" }"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"}"})})]})}),"\n",(0,n.jsxs)(e.p,{children:["If ",(0,n.jsx)(e.code,{children:"icon"})," is missing, it will be a Discord icon by default."]}),"\n",(0,n.jsx)(e.h3,{id:"banner",children:"Banner"}),"\n",(0,n.jsx)(e.p,{children:"Show a dismissable banner on the top of the website. It can be used to show a warning or a notice."}),"\n",(0,n.jsx)(M,{options:[["banner.key","string","Storage key to keep the banner state (dismissed or not)."],["banner.content","React.ReactNode | React.FC","Content of the banner."]]}),"\n",(0,n.jsx)(e.h4,{id:"banner-key",children:"Banner key"}),"\n",(0,n.jsxs)(e.p,{children:["A banner can be dismissed. By default ",(0,n.jsx)(e.code,{children:"banner.key"})," will be ",(0,n.jsx)(e.code,{children:'"CodeXam-banner"'})," and itâs used by ",(0,n.jsx)(e.a,{href:"https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage",children:"localStorage"})," to keep the banner state (dismissed or not) on the client."]}),"\n",(0,n.jsx)(e.p,{children:"If you have updated your banner content, you should change the key to make sure the banner is shown again. The best practice is to always use a descriptive key for the current content, for example:"}),"\n",(0,n.jsx)(e.pre,{"data-language":"jsx","data-theme":"default",hasCopyCode:!0,children:(0,n.jsxs)(e.code,{"data-language":"jsx","data-theme":"default",children:[(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"export"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"default"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" {"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" banner"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" {"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" key"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'2.0-release'"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" content"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Link"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"href"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"https://github.com/Subham-Maity"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"target"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"_blank"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" \uD83C\uDF89 CodeXam 2.0 is released. Read more â"})}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" </"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Link"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" }"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"}"})})]})}),"\n",(0,n.jsx)(e.h3,{id:"navigation",children:"Navigation"}),"\n",(0,n.jsx)(e.p,{children:"Show previous and next page links on the bottom of the content. Itâs useful for navigating between pages."}),"\n",(0,n.jsx)(M,{options:[["navigation","boolean | object","Enable or disable navigation link."],["navigation.prev","boolean","Enable or disable the previous page link."],["navigation.next","boolean","Enable or disable the next page link."]]}),"\n",(0,n.jsx)(e.pre,{"data-language":"jsx","data-theme":"default",hasCopyCode:!0,children:(0,n.jsxs)(e.code,{"data-language":"jsx","data-theme":"default",children:[(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"export"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"default"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" {"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" navigation"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" {"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" prev"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"true"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" next"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"true"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" }"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"}"})})]})}),"\n",(0,n.jsxs)(e.p,{children:["The above is also equivalent to ",(0,n.jsx)(e.code,{children:"navigation: true"}),"."]}),"\n",(0,n.jsx)(e.h3,{id:"head",children:"Head"}),"\n",(0,n.jsxs)(e.p,{children:["Configure the ",(0,n.jsx)(e.code,{children:"<head>"})," tags of the website. You can add meta tags, title, favicon, etc."]}),"\n",(0,n.jsx)(M,{options:[["head","React.ReactNode | React.FC",(0,n.jsxs)(n.Fragment,{children:["Component that renders the ",(0,n.jsx)(e.code,{children:"<head>"})," content."]})]]}),"\n",(0,n.jsx)(e.h3,{id:"static-head-tags",children:"Static head tags"}),"\n",(0,n.jsxs)(e.p,{children:["If you have only static head tags, itâs easy to directly put them in ",(0,n.jsx)(e.code,{children:"head"}),". For example:"]}),"\n",(0,n.jsx)(e.pre,{"data-language":"jsx","data-theme":"default",hasCopyCode:!0,children:(0,n.jsxs)(e.code,{"data-language":"jsx","data-theme":"default",children:[(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"export"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"default"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" {"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"head"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" ("})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <>"})}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"meta"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"name
1"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"viewport"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"content"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"width=device-width, initial-scale=1.0"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" />"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"meta"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"name"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"description"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"content"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"CodeXam: the next docs builder"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" />"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"meta"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"name"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"twitter:card"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"content"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"summary_large_image"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" />"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"meta"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"name"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"twitter:site"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"content"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"@shuding_"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" />"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"meta"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"property"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"og:title"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"content"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"CodeXam: the next docs builder"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" />"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"meta"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"property"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"og:description"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"content"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"CodeXam: the next docs builder"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" />"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"meta"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"name"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"msapplication-TileColor"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"content"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"#ffffff"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" />"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"meta"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"name"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"theme-color"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"content"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"#ffffff"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" />"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" </>"})}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" )"})}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"}"})})]})}),"\n",(0,n.jsx)(e.h4,{id:"render-open-graph-tags",children:"Render Open Graph tags"}),"\n",(0,n.jsx)(e.h3,{id:"sidebar",children:"Sidebar"}),"\n",(0,n.jsx)(M,{options:[["defaultMenuCollapseLevel","number","Specifies the folder level at which the menu on the left is collapsed by default."],["titleComponent","React.ReactNode | React.FC<{ type: string; title: string }>","Custom renderer for sidebar titles."]]}),"\n",(0,n.jsx)(e.h3,{id:"title",children:"Title"}),"\n",(0,n.jsxs)(e.p,{children:["The website title will be the content of ",(0,n.jsx)(e.code,{children:"<h1>"})," of each page. If ",(0,n.jsx)(e.code,{children:"<h1>"})," is missing, it will use the page title specified in the ",(0,n.jsx)(e.a,{href:"/docs/docs-theme/page-configuration",children:"page configuration"}),". You can also provide a global suffix via the ",(0,n.jsx)(e.code,{children:"titleSuffix"})," option."]}),"\n",(0,n.jsx)(M,{options:[["titleSuffix","string | (() => string)","The title suffix."]]}),"\n",(0,n.jsx)(e.pre,{"data-language":"jsx","data-theme":"default",hasCopyCode:!0,children:(0,n.jsxs)(e.code,{"data-language":"jsx","data-theme":"default",children:[(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"export"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"default"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" {"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" titleSuffix"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"' â CodeXam'"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"}"})})]})}),"\n",(0,n.jsx)(e.h3,{id:"footer",children:"Footer"}),"\n",(0,n.jsx)(e.p,{children:"The footer area of the website. You can either specify some content for the default footer, or fully customize it with a custom component."}),"\n",(0,n.jsx)(M,{options:[["footer.content","React.ReactNode | React.FC","Content of the default footer component."],["footer.component","React.ReactNode | React.FC<{ menu: boolean }>","Customized footer component."]]}),"\n",(0,n.jsx)(e.h4,{id:"copyright-information",children:"Copyright information"}
1),"\n",(0,n.jsx)(e.p,{children:"You can add some simple content, such as copyright information to the default footer:"}),"\n",(0,n.jsx)(e.pre,{"data-language":"jsx","data-theme":"default",hasCopyCode:!0,children:(0,n.jsxs)(e.code,{"data-language":"jsx","data-theme":"default",children:[(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"export"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"default"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" {"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" footer"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" {"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" content"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"span"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" MIT ${"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"new"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"Date"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"()"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".getFullYear"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"()} \xa9 <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Link"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"href"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"https://github.com/Subham-Maity"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"target"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"_blank"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">CodeXam</"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Link"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">."})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" </"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"span"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"}"})}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"}"})})]})}),"\n",(0,n.jsx)(e.h3,{id:"edit-link",children:"Edit Link"}),"\n",(0,n.jsx)(e.p,{children:"Show an âEdit this pageâ link on the page that points to the file URL on GitHub (or other places)."}),"\n",(0,n.jsx)(M,{options:[["editLink.content","React.ReactNode | React.FC","Content of the default edit link."],["editLink.component","React.FC<{\n children: React.ReactNode\n className?: string\n filePath?: string\n}>","Customized edit link component."]]}),"\n",(0,n.jsx)(e.h3,{id:"feedback-link",children:"Feedback Link"}),"\n",(0,n.jsx)(e.p,{children:"The built-in feedback link provides a way for users to submit feedback about the documentation. By default, itâs a link that points to the issue creation form of the docs repository, with the current website title prefilled."}),"\n",(0,n.jsx)(M,{options:[["feedback.content","React.ReactNode | React.FC","Content of the feedback link."],["feedback.labels","string","Labels that can be added to the new created GitHub issue."]]}),"\n",(0,n.jsx)(e.h3,{id:"logo",children:"Logo"}),"\n",(0,n.jsx)(e.p,{children:"The logo of the website rendered on the navbar. It can be any React node."}),"\n",(0,n.jsx)(M,{options:[["logo","React.ReactNode | React.FC","Logo of the website."]]}),"\n",(0,n.jsx)(e.h3,{id:"table-of-contents",children:"Table of Contents"}),"\n",(0,n.jsx)(e.p,{children:"Show a table of contents on the right side of the page. Itâs useful for navigating between headings."}),"\n",(0,n.jsx)(M,{options:[["toc.float","boolean","Float the TOC next to the content."],["toc.component","boolean","Float the TOC next to the content."],["toc.extraContent","boolean","Float the TOC next to the content."],["toc.title","React.ReactNode | React.FC","Float the TOC next to the content."]]}),"\n",(0,n.jsx)(e.h4,{id:"floating-toc",children:"Floating TOC"}),"\n",(0,n.jsx)(e.h3,{id:"extra-content",children:"Extra Content"}),"\n",(0,n.jsx)(e.p,{children:"Render extra content at the end of the main area of the page. It can be used to render a comment section, a newsletter form, or any other type of content."}),"\n",(0,n.jsx)(M,{options:[["main.extraContent","React.ReactNode | React.FC","Extra content after the main content."]]}),"\n",(0,n.jsx)(e.h3,{id:"mdx-components",children:"MDX Components"}),"\n",(0,n.jsxs)(e.p,{children:["Provide custom ",(0,n.jsx)(e.a,{href:"https://mdxjs.com/table-of-components/",children:"MDX components"})," to render the content. For example, you can use a custom ",(0,n.jsx)(e.code,{children:"pre"})," component to render code blocks."]}),"\n",(0,n.jsx)(M,{options:[["components","Record<string, React.FC>","Custom MDX components."]]}),"\n",(0,n.jsx)(e.h3,{id:"writing-direction",children:"Writing Direction"}),"\n",(0,n.jsx)(e.p,{children:"The default writing direction of the website."}),"\n",(0,n.jsx)(M,{options:[["direction",'"ltr" | "rtl"',"Default writing direction."]]}),"\n",(0,n.jsx)(e.h3,{id:"docs-repository",children:"Docs Repository"}),"\n",(0,n.jsxs)(e.p,{children:["Set the repository URL of the documentation. Itâs used to generate the â",(0,n.jsx)(e.a,{href:"#edit-link",children:"Edit this page"}),"â link and the â",(0,n.jsx)(e.a,{href:"#feedback-link",children:"Feedback"}),"â link."]}),"\n",(0,n.jsx)(M,{options:[["docsRepositoryBase","string","URL of the documentation repository."]]}),"\n",(0,n.jsx)(e.h4,{id:"specify-path",children:"Specify path"}),"\n",(0,n.jsxs)(e.p,{children:["If the documentation is inside a monorepo, a subfolder, or a different branch of the repository, you can simply set the ",(0,n.jsx)(e.code,{children:"docsRepositoryBase"})," to the root path of the ",(0,n.jsx)(e.code,{children:"pages/"})," folder of your docs. For example:"]}),"\n",(0,n.jsx)(e.pre,{"data-language":"jsx","data-theme":"default",hasCopyCode:!0,children:(0,n.jsxs)(e.code,{"data-language":"jsx","data-theme":"default",children:[(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"export"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"default"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" {"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" docsRepositoryBase"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'https://github.com/Subham-Maity'"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"}"})})]})}
1),"\n",(0,n.jsx)(e.p,{children:"Then CodeXam will automatically generate the correct file path for all pages."}),"\n",(0,n.jsx)(e.h3,{id:"last-updated-date",children:"Last Updated Date"}),"\n",(0,n.jsx)(e.p,{children:"Show the last updated date of each page. Itâs useful for showing the freshness of the content."}),"\n",(0,n.jsx)(M,{options:[["gitTimestamp","React.ReactNode | React.FC<{ timestamp: Date }>","Component to render the last updated info."]]}),"\n",(0,n.jsx)(e.h4,{id:"i18n",children:"I18n"}),"\n",(0,n.jsx)(e.h4,{id:"navbar",children:"Navbar"}),"\n",(0,n.jsx)(e.p,{children:"Customize the navbar of the website."}),"\n",(0,n.jsx)(M,{options:[["navbar","React.ReactNode | React.FC<NavBarProps>","Navbar component."]]}),"\n",(0,n.jsx)(e.h4,{id:"dark-mode-and-themes",children:"Dark Mode and Themes"}),"\n",(0,n.jsx)(e.p,{children:"Customize the theme behavior of the website."}),"\n",(0,n.jsx)(M,{options:[["darkMode","boolean","Show or hide the dark mode toggle button."],["nextThemes","",""]]}),"\n",(0,n.jsx)(e.h4,{id:"theme-color",children:"Theme Color"}),"\n",(0,n.jsx)(e.p,{children:"You can adjust the theme color of the website."}),"\n",(0,n.jsx)(M,{options:[["primaryHue","number | { dark: number; light: number }","The hue of the primary theme color."]]}),"\n",(0,n.jsx)(e.h4,{id:"error-pages",children:"Error Pages"}),"\n",(0,n.jsx)(e.h4,{id:"404---not-found",children:"404 - Not Found"}),"\n",(0,n.jsx)(e.h4,{id:"500---internal-server-error",children:"500 - Internal Server Error"}),"\n",(0,n.jsx)(e.h4,{id:"search",children:"Search"}),"\n",(0,n.jsx)(M,{options:[["component","React.ReactNode | React.FC<{\n className?: string\n directories: Item[]\n}>",""],["emptyResult","React.ReactNode | React.FC",""],["placeholder","string | (() => string)",""]]}),"\n",(0,n.jsx)(e.h3,{id:"favicon-glyph-experimental",children:"Favicon Glyph (Experimental)"}),"\n",(0,n.jsx)(e.p,{children:"This isnât supported by all browsers, but itâs a nice way to customize the favicon of the website."}),"\n",(0,n.jsx)(e.h2,{id:"l-bleed",children:"l. Bleed"}),"\n",(0,n.jsx)(e.pre,{"data-language":"mdx","data-theme":"default",hasCopyCode:!0,children:(0,n.jsxs)(e.code,{"data-language":"mdx","data-theme":"default",children:[(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" Bleed "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'nextra-theme-docs/bleed'"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:" "}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"<"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Bleed"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">Hey, I can use **Markdown** syntax here.</"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Bleed"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:" "}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"<"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Bleed"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"full"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "})}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"</"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Bleed"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:" "}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"<"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Bleed"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"full"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"iframe"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"src"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"https://codesandbox.io/embed/swr-states-4une7"'})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"width"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"100%"'})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"height"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"500px"'})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"title"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"SWR-States"'})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" />"})}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"</"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Bleed"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:" "}),"\n",(0,n.jsx)(e.span,{className:"line",children:" "}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"_______________________________________________________________________________________________"})}),"\n",(0,n.jsx)(e.span,{className:"line",children:" "}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" { Bleed } "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'nextra-theme-docs'"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:" "}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"When wrapping your content "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"with"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"`<Bleed>`"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" it will be slightly wider than the container"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"and will overflow on both sides."})}),"\n",(0,n.jsx)(e.span,{className:"line",children:" "}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"<"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Bleed"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"<"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"style"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"{{ border"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'1px solid #888'"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" padding"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'4rem 2.5rem'"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" textAlign"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'center'"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" }}>"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"_There is nothing to writing. All you do is sit down at a typewriter and **bleed**._"})}),"\n",(0,n.jsx)(e.span,{className:"line",children:" "}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"â Ernest Hemingway"})}),"\n",(0,n.jsx)(e.span,{className:"line",children:" "}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"</"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"</"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Bleed"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:" "}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"It provides a better reading experience when you want to present some graphical information"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" which normally"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"looks nicer "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"in"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" a larger size."})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:" "}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"For example you can put text"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" image"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" video or any component inside"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:":"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:" "}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"<"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Bleed"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"<"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"iframe"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"width"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"100%"'})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"height"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"430"'})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"src"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"https://www.youtube.com/embed/3hccXiXI0u8"'})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"frameBorder"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"0"'})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"allow"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"'})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"allowFullScreen"})}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"/>"})}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"</"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Bleed"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:" "}),"\n",(0,n.jsx)(e.span,{className:"line",children:" "}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"You can even make it full"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"-"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"bleed using "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"`<Bleed full>`"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:":"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:" "}),"\n",(0,n.jsxs)(e.span,{className:"line",ch
1ildren:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"<"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Bleed"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"full"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:""})}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"</"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Bleed"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:" "}),"\n",(0,n.jsx)(e.span,{className:"line",children:" "})]})}),"\n",(0,n.jsx)(e.h3,{id:"video-with-rounded-corners",children:"Video with Rounded Corners"}),"\n",(0,n.jsx)(e.pre,{"data-language":"jsx","data-theme":"default",hasCopyCode:!0,children:(0,n.jsxs)(e.code,{"data-language":"jsx","data-theme":"default",children:[(0,n.jsx)(e.span,{className:"line",children:" "}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"<"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"align"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"center"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"style"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"{{ border"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"solid #888"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" position"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"relative"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"opacity"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"1"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"borderRadius"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"20px"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"overflow"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"hidden"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" } }>"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"iframe"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"className"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"content-center"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"width"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"100%"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"height"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"430"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"src"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"https://www.youtube.com/embed/q933Vpo-Naw"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"title"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"How to Download Anything From GitHub? | Clone a Repository - Git & GitHub Tutorials for Beginners #1"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"frameborder"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"0"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"allow"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"allowfullscreen"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"></"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"iframe"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" </"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"</"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:" "})]})}),"\n",(0,n.jsx)("div",{align:"center",children:(0,n.jsx)("div",{style:{border:"solid #888",position:"relative",opacity:1,borderRadius:"20px",overflow:"hidden"},children:(0,n.jsx)("iframe",{className:"content-center",width:"100%",height:"430",src:"https://www.youtube.com/embed/q933Vpo-Naw",title:"How to Download Anything From GitHub? | Clone a Repository - Git & GitHub Tutorials for Beginners #1",frameborder:"0",allow:"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",allowfullscreen:!0})})}),"\n",(0,n.jsx)(e.h2,{id:"m-callout-component",children:"m. Callout Component"}),"\n",(0,n.jsx)(e.p,{children:"A built-in component of the Docs Theme to show important information to the reader."}),"\n",(0,n.jsxs)(e.p,{children:["import ",f.UW," from 'nextra-theme-docs'"]}),"\n",(0,n.jsx)(e.h3,{id:"example",children:"Example"}),"\n",(0,n.jsx)(f.UW,{children:(0,n.jsxs)(e.p,{children:["A ",(0,n.jsx)(e.strong,{children:"callout"})," is a short piece of text intended to attract attention."]})}),"\n",(0,n.jsx)(f.UW,{type:"info",children:(0,n.jsxs)(e.p,{children:["A ",(0,n.jsx)(e.strong,{children:"callout"})," is a short piece of text intended to attract attention."]})}),"\n",(0,n.jsx)(f.UW,{type:"warning",children:(0,n.jsxs)(e.p,{children:["A ",(0,n.jsx)(e.strong,{children:"callout"})," is a short piece of text intended to attract attention."]})}),"\n",(0,n.jsx)(f.UW,{type:"error",children:(0,n.jsxs)(e.p,{children:["A ",(0,n.jsx)(e.strong,{children:"callout"})," is a short piece of text intended to attract attention."]})}),"\n",(0,n.jsx)(e.h3,{id:"usage",children:"Usage"}),"\n",(0,n.jsx)(e.h4,{id:"default",children:"Default"}),"\n",(0,n.jsx)(f.UW,{emoji:"\uD83D\uDC7E",children:(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:"Space Invaders"})," is a 1978 shoot 'em up arcade game developed by Tomohiro\nNishikado."]})}),"\n",(0,n.jsx)(e.pre,{"data-language":"mdx","data-theme":"default",hasCopyCode:!0,children:(0,n.jsxs)(e.code,{"data-language":"mdx","data-theme":"default",children:[(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"}
1,children:" { Callout } "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'nextra-theme-docs'"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:" "}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"<"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Callout"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"emoji"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"\uD83D\uDC7E"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" **Space Invaders** is a 1978 shoot 'em up arcade game developed by Tomohiro"})}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" Nishikado."})}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"</"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Callout"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]})]})}),"\n",(0,n.jsx)(e.h4,{id:"info",children:"Info"}),"\n",(0,n.jsx)(f.UW,{type:"info",emoji:"â¹ï¸",children:(0,n.jsx)(e.p,{children:"Today is Friday."})}),"\n",(0,n.jsx)(e.pre,{"data-language":"mdx","data-theme":"default",hasCopyCode:!0,children:(0,n.jsxs)(e.code,{"data-language":"mdx","data-theme":"default",children:[(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" { Callout } "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'nextra-theme-docs'"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:" "}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"<"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Callout"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"type"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"info"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"emoji"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"â¹ï¸"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" Today is Friday."})}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"</"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Callout"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]})]})}),"\n",(0,n.jsx)(e.h4,{id:"warning",children:"Warning"}),"\n",(0,n.jsx)(f.UW,{type:"warning",emoji:"â ï¸",children:(0,n.jsx)(e.p,{children:"This API will be deprecated soon."})}),"\n",(0,n.jsx)(e.pre,{"data-language":"mdx","data-theme":"default",hasCopyCode:!0,children:(0,n.jsxs)(e.code,{"data-language":"mdx","data-theme":"default",children:[(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"}
1,children:" { Callout } "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'nextra-theme-docs'"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:" "}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"<"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Callout"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"type"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"warning"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"emoji"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"â ï¸"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" This API will be deprecated soon."})}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"</"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Callout"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]})]})}),"\n",(0,n.jsx)(e.h4,{id:"error",children:"Error"}),"\n",(0,n.jsx)(f.UW,{type:"error",emoji:"\uD83D\uDEAB",children:(0,n.jsx)(e.p,{children:"This is a dangerous feature that can cause everything to explode."})}),"\n",(0,n.jsx)(e.pre,{"data-language":"mdx","data-theme":"default",hasCopyCode:!0,children:(0,n.jsxs)(e.code,{"data-language":"mdx","data-theme":"default",children:[(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" { Callout } "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'nextra-theme-docs'"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:" "}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"<"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Callout"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"type"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"error"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"emoji"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"ï¸\uD83D\uDEAB"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" This is a dangerous feature that can cause everything to explode."})}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"</"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Callout"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]})]})}),"\n",(0,n.jsx)(e.h3,{id:"api",children:"API"}),"\n",(0,n.jsxs)(e.p,{children:["The ",(0,n.jsx)(e.code,{children:"Callout"})," component takes the following props:"]}),"\n",(0,n.jsxs)(e.h4,{id:"type-optional",children:[(0,n.jsx)(e.code,{children:"type"})," (optional)"]}),"\n",(0,n.jsx)(e.p,{children:"The type of the Callout."}),"\n",(0,n.jsxs)(e.ul,{children:["\n",(0,n.jsxs)(e.li,{children:["Type: ",(0,n.jsx)(e.code,{children:"'default' | 'info' | 'warning' | 'error'"})]}),"\n",(0,n.jsxs)(e.li,{children:["Default: ",(0,n.jsx)(e.code,{children:"'default'"})]}),"\n"]}),"\n",(0,n.jsxs)(e.h4,{id:"emoji-optional",children:[(0,n.jsx)(e.code,{children:"emoji"})," (optional)"]}),"\n",(0,n.jsx)(e.p,{children:"The icon to show in the Callout. You can also show your custom icon using this prop."}),"\n",(0,n.jsxs)(e.ul,{children:["\n",(0,n.jsxs)(e.li,{children:["Type: ",(0,n.jsx)(e.code,{children:"ReactNode"})]}),"\n",(0,n.jsxs)(e.li,{children:["Default: ",(0,n.jsx)(e.code,{children:"'\uD83D\uDCA1'"})]}),"\n"]}),"\n",(0,n.jsxs)(e.h4,{id:"children-optional",children:[(0,n.jsx)(e.code,{children:"children"})," (optional)"]}),"\n",(0,n.jsx)(e.p,{children:"The content of the Callout."}),"\n",(0,n.jsxs)(e.ul,{children:["\n",(0,n.jsxs)(e.li,{children:["Type: ",(0,n.jsx)(e.code,{children:"ReactNode"})]}),"\n",(0,n.jsxs)(e.li,{children:["Default: ",(0,n.jsx)(e.code,{children:"null"})]}),"\n"]}),"\n",(0,n.jsx)(e.h2,{id:"n-contact-us",children:"n. Contact Us"}),"\n",(0,n.jsx)(e.h3,{id:"type-1",children:"Type 1"}),"\n",(0,n.jsx)(e.pre,{"data-language":"mdx","data-theme":"default",hasCopyCode:!0,children:(0,n.jsxs)(e.code,{"data-language":"mdx","data-theme":"default",children:[(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"<"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"className"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"text-center font-extrabold md:text-1xl mt-8"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:" "}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"h5"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">Contact Us Via</"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"h5"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"| "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string)"},children:"[](https://www.youtube.com/channel/UCztgfCRJci6nx0VPVZcFstw/featured)"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" | "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string)"},children:"[](https://www.instagram.com/code.xam/)"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" | "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string)"},children:"[](https://twitter.com/code_xam)"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" | "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string)"},children:"[](mailto:[email protected])"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" | "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string)"},children:"[](https://www.linkedin.com/in/subham-xam/)"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" | "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string)"},children:"[](https://github.com/Subham-Maity)"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" |"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |"})}),"\n",(0,n.jsx)(e.span,{className:"line",children:" "}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"</"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]})]})}),"\n",(0,n.jsxs)("div",{className:"text-center font-extrabold md:text-1xl mt-8",children:[(0,n.jsx)("h5",{children:"Contact Us Via"}),(0,n.jsx)(e.table,{children:(0,n.jsx)(e.thead,{children:(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.th,{children:(0,n.jsx)(e.a,{href:"https://www.youtube.com/channel/UCztgfCRJci6nx0VPVZcFstw/featured",children:(0,n.jsx)(e.img,{src:"https://img.shields.io/badge/YouTube-FF0000?style=for-the-badge&logo=youtube&logoColor=white",alt:"Youtube"})})}),(0,n.jsx)(e.th,{children:(0,n.jsx)(e.a,{href:"https://www.instagram.com/code.xam/",children:(0,n.jsx)(e.img,{src:"https://img.shields.io/badge/Instagram-%23E4405F.svg?style=for-the-badge&logo=Instagram&logoColor=white",alt:"Gmail"})})}),(0,n.jsx)(e.th,{children:(0,n.jsx)(e.a,{href:"https://twitter.com/code_xam",children:(0,n.jsx)(e.img,{src:"https://img.shields.io/badge/twitter-%231DA1F2.svg?&style=for-the-badge&logo=twitter&logoColor=white",alt:"Twitter"})})}),(0,n.jsx)(e.th,{children:(0,n.jsx)(e.a,{href:"mailto:[email protected]",children:(0,n.jsx)(e.img,{src:"https://img.shields.io/badge/-Gmail-D14836?style=for-the-badge&logo=Gmail&logoColor=white",alt:"Gmail"})})}),(0,n.jsx)(e.th,{children:(0,n.jsx)(e.a,{href:"https://www.linkedin.com/in/subham-xam/",children:(0,n.jsx)(e.img,{src:"https://img.shields.io/badge/linkedin-%230077B5.svg?&style=for-the-badge&logo=linkedin&logoColor=white",alt:"LinkedIn"})})}),(0,n.jsx)(e.th,{children:(0,n.jsx)(e.a,{href:"https://github.com/Subham-Maity",children:(0,n.jsx)(e.img,{src:"https://img.shields.io/badge/github-%23121011.svg?style=for-the-badge&logo=github&logoColor=white",alt:"Gmail"})})})]})})})]}),"\n",(0,n.jsx)(e.h3,{id:"type-2",children:"Type 2"}),"\n",(0,n.jsx)(e.pre,{"data-language":"mdx","data-theme":"default",hasCopyCode:!0,children:(0,n.jsxs)(e.code,{"data-language":"mdx","data-theme":"default",children:[(0,n.jsx)(e.span,{className:"line",children:" "}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"### Follow us on Social Media"})}),"\n",(0,n.jsx)(e.span,{className:"line",children:" "}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"<"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"className"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"steps-container"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" >"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"style"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"jsx"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string)"},children:"{"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"`"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" @import url(https://fonts.googleapis.com/css?family=Lato);"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" @import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css);"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" body {"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" font-family: 'Lato', sans-serif;"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" color: #FFF;"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" background: #322f30;"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" -webkit-font-smoothing: antialiased;"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(
10,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" }"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" a {"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" text-decoration: none;"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" color: #fff;"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" }"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" p > a:hover{"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" color: #d9d9d9;"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" text-decoration: underline;"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" }"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" h1,"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" h2,"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" h3,"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" h4,"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" h5,"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" h6 {"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" margin: 1% 0 1% 0;"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" }"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" ._12 {"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" font-size: 1.2em;"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" }"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" ._14 {"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" font-size: 1.4em;"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" }"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" ul {"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" padding:0;"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" list-style: none;"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" }"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" .footer-social-icons {"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" width: 350px;"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" display:block;"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" margin: 0 auto;"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" }"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" .social-icon {"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" color: #fff;"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" }"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" ul.social-icons {"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" margin-top: 10px;"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" }"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" .social-icons li {"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" vertical-align: top;"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" display: inline;"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" height: 100px;"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" }"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" .social-icons a {"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" color: #fff;"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" text-decoration: none;"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" }"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" .fa-facebook {"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" padding:10px 14px;"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" -o-transition:.5s;"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" -ms-transition:.5s;"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" -moz-transition:.5s;"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" -webkit-transition:.5s;"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" transition: .5s;"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" background-color: #322f30;"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" }"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" .fa-facebook:hover {"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" background-color: #3d5b99;"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" }"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" .fa-twitter {"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" padding:10px 12px;"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" -o-transition:.5s;"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" -ms-transition:.5s;"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" -moz-transition:.5s;"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" -webkit-transition:.5s;"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" transition: .5s;"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" background-color: #322f30;"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" }"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" .fa-twitter:hover {"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" background-color: #00aced;"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},
1children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" }"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" .fa-rss {"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" padding:10px 14px;"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" -o-transition:.5s;"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" -ms-transition:.5s;"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" -moz-transition:.5s;"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" -webkit-transition:.5s;"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" transition: .5s;"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" background-color: #322f30;"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" }"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" .fa-rss:hover {"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" background-color: #eb8231;"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" }"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" .fa-youtube {"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" padding:10px 14px;"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" -o-transition:.5s;"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" -ms-transition:.5s;"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" -moz-transition:.5s;"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" -webkit-transition:.5s;"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" transition: .5s;"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" background-color: #322f30;"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" }"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" .fa-youtube:hover {"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" background-color: #e64a41;"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" }"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" .fa-linkedin {"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" padding:10px 14px;"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" -o-transition:.5s;"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" -ms-transition:.5s;"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" -moz-transition:.5s;"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" -webkit-transition:.5s;"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" transition: .5s;"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" background-color: #322f30;"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" }"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" .fa-linkedin:hover {"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" background-color: #0073a4;"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" }"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" .fa-github {"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" padding:10px 14px;"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" -o-transition:.5s;"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" -ms-transition:.5s;"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" -moz-transition:.5s;"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" -webkit-transition:.5s;"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" transition: .5s;"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" background-color: #322f30;"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" }"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" .fa-github:hover {"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" background-color: #5a32a3;"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" }"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" `}</"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"style"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"class"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"footer-social-icons"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"ul"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"class"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"social-icons"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"li"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"><"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Link"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"href"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"https://twitter.com/code_xam"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"target"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"_blank"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"class"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"social-icon"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"> <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"i"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"class"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"fa fa-twitter"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"></"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"i"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"></"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Link"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"></"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"li"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"li"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"><"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Link"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"href"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"https://code-xam.vercel.app/"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"
1var(--shiki-token-function)"},children:"target"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"_blank"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"class"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"social-icon"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"> <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"i"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"class"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"fa fa-rss"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"></"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"i"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"></"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Link"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"></"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"li"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"li"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"><"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Link"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"href"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"https://www.youtube.com/channel/UCztgfCRJci6nx0VPVZcFstw/featured"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"target"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"_blank"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"class"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"social-icon"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"> <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"i"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"class"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"fa fa-youtube"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"></"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"i"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"></"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Link"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"></"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"li"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"li"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"><"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Link"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"href"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"https://www.linkedin.com/in/subham-xam/"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"target"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"_blank"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"class"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"social-icon"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"> <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"i"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"class"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"fa fa-linkedin"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"></"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"i"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"></"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Link"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"></"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"li"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"li"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"><"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Link"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"href"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"https://github.com/Subham-Maity"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"target"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"_blank"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"class"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"social-icon"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"> <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"i"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"class"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"fa fa-github"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"></"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"i"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"></"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Link"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"></"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"li"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" </"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"ul"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:" "}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" </"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"</"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]})]})}),"\n",(0,n.jsx)(e.h3,{id:"follow-us-on-social-media",children:"Follow us on Social Media"}),"\n",(0,n.jsxs)("div",{className:"jsx-595c0d598422b1c8 steps-container",children:[(0,n.jsx)(l(),{id:"595c0d598422b1c8",children:'@import url(https://fonts.googleapis.com/css?family=Lato);@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css);body.jsx-595c0d598422b1c8{font-family:"Lato",sans-serif;color:#fff;background:#322f30;-webkit-font-smoothing:antialiased}a.jsx-595c0d598422b1c8{text-decoration:none;color:#fff}p.jsx-595c0d598422b1c8>a.jsx-595c0d598422b1c8:hover{color:#d9d9d9;text-decoration:underline}h1.jsx-595c0d598422b1c8,h2.jsx-595c0d598422b1c8,h3.jsx-595c0d598422b1c8,h4.jsx-595c0d598422b1c8,h5.jsx-595c0d598422b1c8,h6.jsx-595c0d598422b1c8{margin:1%0 1%0}._12.jsx-595c0d598422b1c8{font-size:1.2em}._14.jsx-595c0d598422b1c8{font-size:1.4em}ul.jsx-595c0d598422b1c8{padding:0;list-style:none}.footer-social-icons.jsx-595c0d598422b1c8{width:350px;display:block;margin:0 auto}.social-icon.jsx-595c0d598422b1c8{color:#fff}ul.social-icons.jsx-595c0d598422b1c8{margin-top:10px}.social-icons.jsx-595c0d598422b1c8 li.jsx-595c0d598422b1c8{vertical-align:top;display:inline;height:100px}.social-icons.jsx-595c0d598422b1c8 a.jsx-595c0d598422b1c8{color:#fff;text-decoration:none}.fa-facebook.jsx-595c0d598422b1c8{padding:10px 14px;-o-transition:.5s;-ms-transition:.5s;-moz-transition:.5s;-webkit-transition:.5s;transition:.5s;background-color:#322f30}.fa-facebook.jsx-595c0d598422b1c8:hover{background-color:#3d5b99}.fa-twitter.jsx-595c0d598422b1c8{padding:10px 12px;-o-transition:.5s;-ms-transition:.5s;-moz-transition:.5s;-webkit-transition:.5s;transition:.5s;background-color:#322f30}.fa-twitter.jsx-595c0d598422b1c8:hover{background-color:#00aced}.fa-rss.jsx-595c0d598422b1c8{padding:10px 14px;-o-transition:.5s;-ms-transition:.5s;-moz-transition:.5s;-webkit-transition:.5s;transition:.5s;background-color:#322f30}.fa-rss.jsx-595c0d598422b1c8:hover{background-color:#eb8231}.fa-youtube.jsx-595c0d598422b1c8{padding:10px 14px;-o-transition:.5s;-ms-transition:.5s;-moz-transition:.5s;-webkit-transition:.5s;transition:.5s;background-color:#322f30}.fa-youtube.jsx-595c0d598422b1c8:hover{background-color:#e64a41}.fa-linkedin.jsx-595c0d598422b1c8{padding:10px 14px;-o-transition:.5s;-ms-transition:.5s;-moz-transition:.5s;-webkit-transition:.5s;transition:.5s;background-color:#322f30}.fa-linkedin.jsx-595c0d598422b1c8:hover{background-color:#0073a4}.fa-github.jsx-595c0d598422b1c8{padding:10px 14px;-o-transition:.5s;-ms-transition:.5s;-moz-transition:.5s;-webkit-transition:.5s;transition:.5s;background-color:#322f30}.fa-github.jsx-595c0d598422b1c8:hover{background-color:#5a32a3}'}),(0,n.jsx)("div",{class:"footer-social-icons",className:"jsx-595c0d598422b1c8",children:(0,n.jsxs)("ul",{class:"social-icons",className:"jsx-595c0d598422b1c8",children:[(0,n.jsx)("li",{className:"jsx-595c0d598422b1c8",children:(0,n.jsx)(y(),{href:"https://twitter.com/code_xam",target:"_blank",class:"social-icon",children:(0,n.jsx)("i",{class:"fa fa-twitter",className:"jsx-595c0d598422b1c8"})})}),(0,n.jsx)("li",{className:"jsx-595c0d598422b1c8",children:(0,n.jsx)(y(),{href:"https://code-xam.vercel.app/",target:"_blank",class:"social-icon",children:(0,n.jsx)("i",{class:"fa fa-rss",className:"jsx-595c0d598422b1c8"})})}),(0,n.jsx)("li",{className:"jsx-595c0d598422b1c8",children:(0,n.jsx)(y(),{href:"https://www.youtube.com/channel/UCztgfCRJci6nx0VPVZcFstw/featured",target:"_blank",class:"social-icon",children:(0,n.jsx)("i",{class:"fa fa-youtube",className:"jsx-595c0d598422b1c8"})})}),(0,n.jsx)("li",{className:"jsx-595c0d598422b1c8",children:(0,n.jsx)(y(),{href:"https://www.linkedin.com/in/subham-xam/",target:"_blank",class:"social-icon",children:(0,n.jsx)("i",{class:"fa fa-linkedin",className:"jsx-595c0d598422b1c8"})})}),(0,n.jsx)("li",{className:"jsx-595c0d598422b1c8",children:(0,n.jsx)(y(),{href:"https://github.com/Subham-Maity",target:"_blank",class:"social-icon",children:(0,n.jsx)("i",{class:"fa fa-github",className:"jsx-595c0d598422b1c8"})})})]})})]}),"\n",(0,n.jsx)(e.h2,{id:"o-border-around-the-code",children:"o. Border around the code"}),"\n",(0,n.jsx)(e.h3,{id:"type-1-1",children:"Type 1"}),"\n",(0,n.jsx)(e.pre,{"data-language":"jsx","data-theme":"default",hasCopyCode:!0,children:(0,n.jsxs)(e.code,{"data-language":"jsx","data-theme":"default",children:[(0,n.jsx)(e.span,{className:"line",children:" "}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"align"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"center"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"style"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"{{ border"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'1px solid #888'"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" padding"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'0rem 1rem'"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" textAlign"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-co
1lor-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'center'"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" }}>"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"h2"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"align"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"left"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">Author</"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"h2"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"p"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"align"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"center"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"img"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"src"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"https://i.imgur.com/l5wAGee.gif"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"/>"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" </"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"p"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" _Hey I'm your Subham (blockchain developer). I'm here to help you learn about the blockchain technology and its real world project._"})}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" â Xam"})}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"h7"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"align"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"center"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" **Are you exited to learn about the blockchain technology's real world project"})}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" ? Then you are in the right place!**"})}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" I promise you, you'll get a million dollar project free of charge and a complete step-by-step guide in the course . So, what are you waiting for?"})}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" </"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"h7"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" </"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:" "}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" </"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:" "})]})}),"\n",(0,n.jsx)("div",{align:"center",children:(0,n.jsxs)("div",{style:{border:"1px solid #888",padding:"0rem 1rem",textAlign:"center"},children:[(0,n.jsx)("h2",{align:"left",children:"Author"}),(0,n.jsx)("p",{align:"center",children:(0,n.jsx)("img",{src:"https://i.imgur.com/l5wAGee.gif"})}),(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.em,{children:"Hey I'm your Subham (blockchain developer). I'm here to help you learn about the blockchain technology and its real world project."}),"\nâ Xam"]}),(0,n.jsx)("h7",{align:"center",children:(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:"Are you exited to learn about the blockchain technology's real world project\n? Then you are in the right place!"}),"\nI promise you, you'll get a million dollar project free of charge and a complete step-by-step guide in the course . So, what are you waiting for?"]})})]})}),"\n",(0,n.jsx)(e.h3,{id:"type-2-1",children:"Type 2"}),"\n",(0,n.jsx)(e.pre,{"data-language":"html","data-theme":"default",hasCopyCode:!0,children:(0,n.jsxs)(e.code,{"data-language":"html","data-theme":"default",children:[(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"class"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"gradient-border"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"id"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"box"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"p"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"}
1,children:" align"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"center"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"img"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"src"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"https://user-images.githubusercontent.com/97989643/201496036-500542f7-3040-4f14-b14c-05e2bb075beb.gif"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"/>"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" </"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"p"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" </"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]})]})}),"\n",(0,n.jsx)("div",{class:"gradient-border",id:"box",children:(0,n.jsx)("p",{align:"center",children:(0,n.jsx)("img",{src:"https://user-images.githubusercontent.com/97989643/201496036-500542f7-3040-4f14-b14c-05e2bb075beb.gif"})})}),"\n",(0,n.jsx)(e.h3,{id:"type-3",children:"Type 3"}),"\n",(0,n.jsx)(e.pre,{"data-language":"html","data-theme":"default",hasCopyCode:!0,children:(0,n.jsxs)(e.code,{"data-language":"html","data-theme":"default",children:[(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"style"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string)"},children:"{{"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"border:"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:'"solid '}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"#888"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:'", '}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"position:"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:' "relative" '}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:",opacity:"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"1"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:",borderRadius:"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:' "20px" '}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:",overflow:"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:' "hidden" '}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"}"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"}"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"}
1,children:" align"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"center"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"style"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string)"},children:"{{"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"border:"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" '1px "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"solid"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"#888"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"', "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"padding:"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" '0rem "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"1rem"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"', "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"textAlign:"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" 'center' "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"}}"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"h2"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" align"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"left"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">Author</"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"h2"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"p"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" align"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"center"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"img"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"style"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string)"},children:"{{"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"border:"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:'"solid '}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"#888"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:'", '}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"position:"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:' "relative" '}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:",opacity:"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"1"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:",borderRadius:"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:' "20px" '}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:",overflow:"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:' "hidden" '}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"}"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"}"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"src"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"https://media4.giphy.com/media/Hicydpti7wG3vA8Zr4/giphy.gif?cid=ecf05e47pq44hry9re27thxnjcezuifd6b0gzyvbxpfy4ua3&rid=giphy.gif&ct=g"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"/>"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" </"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"p"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" _Hey I'm your XAM(subham). In this tutorial you will learn how to create a basic website using tailwind css. I hope you will enjoy this tutorial. If you have any doubt or suggestion please feel free to contact me. I will be happy to help you. Thank y
1ou for your support. Have a nice day!_"})}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" â Xam"})}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"h7"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"align"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"center"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" **Are you exited to learn about the Tailwind CSS?**"})}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" I promise you, you'll get a million dollar course free of charge and a complete step-by-step guide in the course . So, what are you waiting for?"})}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" </"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"h7"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" </"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" </"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"></"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]})]})}),"\n",(0,n.jsx)("div",{style:{border:"solid #888",position:"relative",opacity:1,borderRadius:"20px",overflow:"hidden"},children:(0,n.jsx)("div",{align:"center",children:(0,n.jsxs)("div",{style:{border:"1px solid #888",padding:"0rem 1rem",textAlign:"center"},children:[(0,n.jsx)("h2",{align:"left",children:"Author"}),(0,n.jsx)("p",{align:"center",children:(0,n.jsx)("img",{style:{border:"solid #888",position:"relative",opacity:1,borderRadius:"20px",overflow:"hidden"},src:"https://media4.giphy.com/media/Hicydpti7wG3vA8Zr4/giphy.gif?cid=ecf05e47pq44hry9re27thxnjcezuifd6b0gzyvbxpfy4ua3&rid=giphy.gif&ct=g"})}),(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.em,{children:"Hey I'm your XAM(subham). In this tutorial you will learn how to create a basic website using tailwind css. I hope you will enjoy this tutorial. If you have any doubt or suggestion please feel free to contact me. I will be happy to help you. Thank y
1ou for your support. Have a nice day!"}),"\nâ Xam"]}),(0,n.jsx)("h7",{align:"center",children:(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:"Are you exited to learn about the Tailwind CSS?"}),"\nI promise you, you'll get a million dollar course free of charge and a complete step-by-step guide in the course . So, what are you waiting for?"]})})]})})}),"\n",(0,n.jsx)(e.h3,{id:"type-4",children:"Type 4"}),"\n",(0,n.jsxs)(e.ul,{children:["\n",(0,n.jsx)(e.li,{children:"Underline"}),"\n"]}),"\n",(0,n.jsx)(e.pre,{"data-language":"html","data-theme":"default",hasCopyCode:!0,children:(0,n.jsx)(e.code,{"data-language":"html","data-theme":"default",children:(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"<"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"img"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"width"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"100%"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"height"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"2px"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"src"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"https://user-images.githubusercontent.com/97989643/201496776-6286cc8d-191a-440f-9b57-be5a0d3867b6.gif"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"></"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"img"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]})})}),"\n",(0,n.jsx)("img",{width:"100%",height:"2px",src:"https://user-images.githubusercontent.com/97989643/201496776-6286cc8d-191a-440f-9b57-be5a0d3867b6.gif"}),"\n",(0,n.jsx)(e.h3,{id:"type-5",children:"Type 5"}),"\n",(0,n.jsx)(e.pre,{"data-language":"html","data-theme":"default",hasCopyCode:!0,children:(0,n.jsxs)(e.code,{"data-language":"html","data-theme":"default",children:[(0,n.jsx)(e.span,{className:"line",children:" "}),"\n",(0,n.jsx)(e.span,{className:"line",children:" "}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"<"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"p"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" align"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"center"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"img"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"style"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string)"},children:"{{"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"border:"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:'"solid '}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"#888"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:'", '}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"position:"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:' "relative" '}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:",opacity:"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"1"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:",borderRadius:"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:' "255px '}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"15px"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"225px"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"15px"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"/15px "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"225px"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"15px"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"255px"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:'" '}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:",overflow:"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:' "hidden" '}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:",boxShadow"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:' "20px '}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"38px"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"34px"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"-26px"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"hsla(0,0%,0%,.2)"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:'"} '}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"}"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"src"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"https://media.giphy.com/media/zOtaJZSCavzHy/giphy.gif"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"/>"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"</"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"p"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:" "})]})}),"\n",(0,n.jsx)("p",{align:"center",children:(0,n.jsx)("img",{style:{border:"solid #888",position:"relative",opacity:1,borderRadius:"255px 15px 225px 15px/15px 225px 15px 255px",overflow:"hidden",boxShadow:"20px 38px 34px -26px hsla(0,0%,0%,.2)"},src:"https://media.giphy.com/media/zOtaJZSCavzHy/giphy.gif"})}),"\n",(0,n.jsx)(e.h2,{id:"p-white-table-custom-tailwind-css",children:"p. White Table Custom Tailwind CSS"}),"\n",(0,n.jsx)(e.h3,{id:"type-1-2",children:"Type 1"}),"\n",(0,n.jsx)(e.pre,{"data-language":"html","data-theme":"default",hasCopyCode:!0,children:(0,n.jsxs)(e.code,{"data-language":"html","data-theme":"default",children:[(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"<"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"class"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"container mx-auto px-4 sm:px-8"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"class"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"py-8"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"h2"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"class"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"text-2xl font-semibold leading-tight"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">Invoices</"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"h2"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" </"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"class"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"-mx-4 sm:-mx-8 px-4 sm:px-8 py-4 overflow-x-auto"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"div"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"class"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"inline-block min-w-full shadow-md rounded-lg overflow-hidden"'})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" >"})}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"table"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"class"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"min-w-full leading-normal"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"thead"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"tr"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"th"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"class"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider"'})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" >"})}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" Name"})}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" </"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"th"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"th"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"class"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider"'})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" >"})}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" Money"})}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" </"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"th"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.spa
1n,{style:{color:"var(--shiki-token-string-expression)"},children:"th"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"class"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider"'})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" >"})}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" Issued / Due"})}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" </"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"th"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"th"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"class"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider"'})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" >"})}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" Status"})}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" </"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"th"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"th"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"class"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"px-5 py-3 border-b-2 border-gray-200 bg-gray-100"'})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" ></"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"th"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" </"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"tr"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" </"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"thead"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"tbody"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"tr"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"td"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"class"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"px-5 py-5 border-b border-gray-200 bg-white text-sm"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"class"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"flex"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"class"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"flex-shrink-0 w-10 h-10"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"img"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"class"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"w-full h-full rounded-full"'})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"src"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2.2&w=160&h=160&q=80"'})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"alt"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'""'})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" />"})}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" </"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"class"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"ml-3"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"p"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"class"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"text-gray-900 whitespace-no-wrap"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" Molly Sanders"})}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" </"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"p"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"p"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"class"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"text-gray-600 whitespace-no-wrap"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">000004</"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"p"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" </"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" </"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" </"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"td"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"td"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"class"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"px-5 py-5 border-b border-gray-200 bg-white text-sm"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"p"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"class"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"text-gray-900 whitespace-no-wrap"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">$20,000</"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"p"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"p"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"class"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"text-gray-600 whitespace-no-wrap"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">USD</"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"p"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" </"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"td"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"td"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"class"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"px-5 py-5 border-b border-gray-200 bg-white text-sm"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"p"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"class"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"text-gray-900 whitespace-no-wrap"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">Sept 28, 2019</"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"p"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"p"}),(0,n.jsx)(e.span,{
1style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"class"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"text-gray-600 whitespace-no-wrap"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">Due in 3 days</"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"p"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" </"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"td"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"td"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"class"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"px-5 py-5 border-b border-gray-200 bg-white text-sm"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"span"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"class"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"relative inline-block px-3 py-1 font-semibold text-green-900 leading-tight"'})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" >"})}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"span"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"aria-hidden"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"class"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"absolute inset-0 bg-green-200 opacity-50 rounded-full"'})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" ></"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"span"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"span"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"class"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"relative"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">Paid</"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"span"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" </"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"span"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" </"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"td"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"td"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"class"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"px-5 py-5 border-b border-gray-200 bg-white text-sm text-right"'})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" >"})}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"button"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"type"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"button"'})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"class"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"inline-block text-gray-500 hover:text-gray-700"'})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" >"})}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"svg"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"class"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"inline-block h-6 w-6 fill-current"'})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"viewBox"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"0 0 24 24"'})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" >"})}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"path"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"d"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"M12 6a2 2 0 110-4 2 2 0 010 4zm0 8a2 2 0 110-4 2 2 0 010 4zm-2 6a2 2 0 104 0 2 2
10 00-4 0z"'})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" />"})}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" </"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"svg"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" </"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"button"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" </"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"td"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" </"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"tr"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"tr"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"td"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"class"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"px-5 py-5 border-b border-gray-200 bg-white text-sm"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"class"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"flex"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"class"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"flex-shrink-0 w-10 h-10"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"img"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"class"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"w-full h-full rounded-full"'})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"src"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2.2&w=160&h=160&q=80"'})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"alt"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'""'})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" />"})}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" </"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"class"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"ml-3"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"p"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"class"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"text-gray-900 whitespace-no-wrap"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" Michael Roberts"})}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" </"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"p"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"p"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"class"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"text-gray-600 whitespace-no-wrap"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">000003</"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"p"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" </"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" </"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" </"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"td"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"td"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"class"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"px-5 py-5 border-b border-gray-200 bg-white text-sm"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"p"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"class"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"text-gray-900 whitespace-no-wrap"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">$214,000</"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"p"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"p"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"class"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"text-gray-600 whitespace-no-wrap"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">USD</"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"p"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" </"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"td"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"td"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"class"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"px-5 py-5 border-b border-gray-200 bg-white text-sm"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"p"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"class"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"text-gray-900 whitespace-no-wrap"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">Sept 25, 2019</"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"p"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"p"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"class"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"text-gray-600 whitespace-no-wrap"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">Due in 6 days</"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"p"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" </"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"td"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"td"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"class"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"px-5 py-5 border-b border-gray-200 bg-white text-sm"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"span"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"class"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"relative inline-block px-3 py-1 font-semibold text-green-900 leading-tight"'})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" >"})}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"span"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"aria-hidden"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"}
1,children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"class"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"absolute inset-0 bg-green-200 opacity-50 rounded-full"'})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" ></"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"span"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"span"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"class"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"relative"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">Paid</"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"span"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" </"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"span"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" </"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"td"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"td"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"class"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"px-5 py-5 border-b border-gray-200 bg-white text-sm text-right"'})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" >"})}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"button"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"type"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"button"'})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"class"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"inline-block text-gray-500 hover:text-gray-700"'})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" >"})}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"svg"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"class"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"inline-block h-6 w-6 fill-current"'})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"viewBox"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"0 0 24 24"'})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" >"})}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"path"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"d"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"M12 6a2 2 0 110-4 2 2 0 010 4zm0 8a2 2 0 110-4 2 2 0 010 4zm-2 6a2 2 0 104 0 2 2
10 00-4 0z"'})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" />"})}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" </"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"svg"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" </"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"button"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" </"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"td"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" </"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"tr"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"tr"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"td"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"class"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"px-5 py-5 border-b border-gray-200 bg-white text-sm"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"class"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"flex"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"class"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"flex-shrink-0 w-10 h-10"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"img"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"class"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"w-full h-full rounded-full"'})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"src"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"https://images.unsplash.com/photo-1540845511934-7721dd7adec3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2.2&w=160&h=160&q=80"'})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"alt"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'""'})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" />"})}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" </"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"class"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"ml-3"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"p"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"class"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"text-gray-900 whitespace-no-wrap"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" Devin Childs"})}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" </"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"p"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"p"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"class"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"text-gray-600 whitespace-no-wrap"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">000002</"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"p"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" </"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" </"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" </"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"td"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"td"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"class"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"px-5 py-5 border-b border-gray-200 bg-white text-sm"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"p"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"class"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"text-gray-900 whitespace-no-wrap"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">$20,000</"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"p"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"p"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"class"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"text-gray-600 whitespace-no-wrap"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">USD</"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"p"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" </"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"td"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"td"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"class"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"px-5 py-5 border-b border-gray-200 bg-white text-sm"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"p"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"class"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"text-gray-900 whitespace-no-wrap"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">Sept 14, 2019</"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"p"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"p"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"class"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"text-gray-600 whitespace-no-wrap"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">Due in 2 weeks</"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"p"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" </"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"td"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"td"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"class"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"px-5 py-5 border-b border-gray-200 bg-white text-sm"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"span"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"class"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"relative inline-block px-3 py-1 font-semibold text-orange-900 leading-tight"'})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" >"})}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"span"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"aria-hidden"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},c
1hildren:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"class"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"absolute inset-0 bg-orange-200 opacity-50 rounded-full"'})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" ></"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"span"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"span"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"class"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"relative"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">Pending</"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"span"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" </"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"span"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" </"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"td"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"td"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"class"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"px-5 py-5 border-b border-gray-200 bg-white text-sm text-right"'})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" >"})}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"button"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"type"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"button"'})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"class"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"inline-block text-gray-500 hover:text-gray-700"'})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" >"})}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"svg"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"class"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"inline-block h-6 w-6 fill-current"'})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"viewBox"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"0 0 24 24"'})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" >"})}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"path"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"d"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"M12 6a2 2 0 110-4 2 2 0 010 4zm0 8a2 2 0 110-4 2 2 0 010 4zm-2 6a2 2 0 104 0 2 2
10 00-4 0z"'})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" />"})}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" </"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"svg"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" </"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"button"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" </"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"td"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" </"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"tr"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"tr"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"td"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"class"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"px-5 py-5 bg-white text-sm"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"class"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"flex"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"class"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"flex-shrink-0 w-10 h-10"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"img"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"class"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"w-full h-full rounded-full"'})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"src"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"https://images.unsplash.com/photo-1522609925277-66fea332c575?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2.2&h=160&w=160&q=80"'})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"alt"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'""'})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" />"})}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" </"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"class"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"ml-3"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"p"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"class"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"text-gray-900 whitespace-no-wrap"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" Frederick Nicholas"})}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" </"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"p"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"p"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"class"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"text-gray-600 whitespace-no-wrap"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">000001</"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"p"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" </"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" </"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" </"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"td"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"td"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"class"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"px-5 py-5 bg-white text-sm"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"p"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"class"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"text-gray-900 whitespace-no-wrap"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">$12,000</"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"p"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"p"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"class"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"text-gray-600 whitespace-no-wrap"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">USD</"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"p"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" </"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"td"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"td"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"class"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"px-5 py-5 bg-white text-sm"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"p"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"class"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"text-gray-900 whitespace-no-wrap"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">Sept 6, 2019</"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"p"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"p"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"class"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"text-gray-600 whitespace-no-wrap"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" Due 3 weeks ago"})}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" </"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"p"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" </"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"td"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"td"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"class"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"px-5 py-5 bg-white text-sm"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"span"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"class"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"relative inline-block px-3 py-1 font-semibold text-red-900 leading-tight"'})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" >"})}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"span"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{
1style:{color:"var(--shiki-token-function)"},children:"aria-hidden"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"class"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"absolute inset-0 bg-red-200 opacity-50 rounded-full"'})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" ></"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"span"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"span"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"class"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"relative"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">Overdue</"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"span"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" </"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"span"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" </"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"td"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"td"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"class"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"px-5 py-5 bg-white text-sm text-right"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"button"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"type"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"button"'})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"class"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"inline-block text-gray-500 hover:text-gray-700"'})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" >"})}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"svg"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"class"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"inline-block h-6 w-6 fill-current"'})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"viewBox"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"0 0 24 24"'})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" >"})}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"path"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"d"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"M12 6a2 2 0 110-4 2 2 0 010 4zm0 8a2 2 0 110-4 2 2 0 010 4zm-2 6a2 2 0 104 0 2 2
10 00-4 0z"'})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" />"})}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" </"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"svg"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" </"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"button"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" </"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"td"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" </"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"tr"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" </"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"tbody"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" </"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"table"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" </"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" </"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" </"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"</"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:" "})]})}),"\n",(0,n.jsx)("div",{class:"container mx-auto px-4 sm:px-8",children:(0,n.jsxs)("div",{class:"py-8",children:[(0,n.jsx)("div",{children:(0,n.jsx)("h2",{class:"text-2xl font-semibold leading-tight",children:"Invoices"})}),(0,n.jsx)("div",{class:"-mx-4 sm:-mx-8 px-4 sm:px-8 py-4 overflow-x-auto",children:(0,n.jsx)("div",{class:"inline-block min-w-full shadow-md rounded-lg overflow-hidden",children:(0,n.jsxs)("table",{class:"min-w-full leading-normal",children:[(0,n.jsx)("thead",{children:(0,n.jsxs)("tr",{children:[(0,n.jsx)("th",{class:"px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider",children:(0,n.jsx)(e.p,{children:"Name"})}),(0,n.jsx)("th",{class:"px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider",children:(0,n.jsx)(e.p,{children:"Money"})}),(0,n.jsx)("th",{class:"px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider",children:(0,n.jsx)(e.p,{children:"Issued / Due"})}),(0,n.jsx)("th",{class:"px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider",children:(0,n.jsx)(e.p,{children:"Status"})}),(0,n.jsx)("th",{class:"px-5 py-3 border-b-2 border-gray-200 bg-gray-100"})]})}),(0,n.jsxs)("tbody",{children:[(0,n.jsxs)("tr",{children:[(0,n.jsx)("td",{class:"px-5 py-5 border-b border-gray-200 bg-white text-sm",children:(0,n.jsxs)("div",{class:"flex",children:[(0,n.jsx)("div",{class:"flex-shrink-0 w-10 h-10",children:(0,n.jsx)("img",{class:"w-full h-full rounded-full",src:"https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2.2&w=160&h=160&q=80",alt:""})}),(0,n.jsxs)("div",{class:"ml-3",children:[(0,n.jsx)("p",{class:"text-gray-900 whitespace-no-wrap",children:(0,n.jsx)(e.p,{children:"Molly Sanders"})}),(0,n.jsx)("p",{class:"text-gray-600 whitespace-no-wrap",children:"000004"})]})]})}),(0,n.jsxs)("td",{class:"px-5 py-5 border-b border-gray-200 bg-white text-sm",children:[(0,n.jsx)("p",{class:"text-gray-900 whitespace-no-wrap",children:"$20,000"}),(0,n.jsx)("p",{class:"text-gray-600 whitespace-no-wrap",children:"USD"})]}),(0,n.jsxs)("td",{class:"px-5 py-5 border-b border-gray-200 bg-white text-sm",children:[(0,n.jsx)("p",{class:"text-gray-900 whitespace-no-wrap",children:"Sept 28, 2019"}),(0,n.jsx)("p",{class:"text-gray-600 whitespace-no-wrap",children:"Due in 3 days"})]}),(0,n.jsx)("td",{class:"px-5 py-5 border-b border-gray-200 bg-white text-sm",children:(0,n.jsxs)("span",{class:"relative inline-block px-3 py-1 font-semibold text-green-900 leading-tight",children:[(0,n.jsx)("span",{"aria-hidden":!0,
1class:"absolute inset-0 bg-green-200 opacity-50 rounded-full"}),(0,n.jsx)("span",{class:"relative",children:"Paid"})]})}),(0,n.jsx)("td",{class:"px-5 py-5 border-b border-gray-200 bg-white text-sm text-right",children:(0,n.jsx)("button",{type:"button",class:"inline-block text-gray-500 hover:text-gray-700",children:(0,n.jsx)("svg",{class:"inline-block h-6 w-6 fill-current",viewBox:"0 0 24 24",children:(0,n.jsx)("path",{d:"M12 6a2 2 0 110-4 2 2 0 010 4zm0 8a2 2 0 110-4 2 2 0 010 4zm-2 6a2 2 0 104 0 2 2 0 00-4 0z"})})})})]}),(0,n.jsxs)("tr",{children:[(0,n.jsx)("td",{class:"px-5 py-5 border-b border-gray-200 bg-white text-sm",children:(0,n.jsxs)("div",{class:"flex",children:[(0,n.jsx)("div",{class:"flex-shrink-0 w-10 h-10",children:(0,n.jsx)("img",{class:"w-full h-full rounded-full",src:"https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2.2&w=160&h=160&q=80",alt:""})}),(0,n.jsxs)("div",{class:"ml-3",children:[(0,n.jsx)("p",{class:"text-gray-900 whitespace-no-wrap",children:(0,n.jsx)(e.p,{children:"Michael Roberts"})}),(0,n.jsx)("p",{class:"text-gray-600 whitespace-no-wrap",children:"000003"})]})]})}),(0,n.jsxs)("td",{class:"px-5 py-5 border-b border-gray-200 bg-white text-sm",children:[(0,n.jsx)("p",{class:"text-gray-900 whitespace-no-wrap",children:"$214,000"}),(0,n.jsx)("p",{class:"text-gray-600 whitespace-no-wrap",children:"USD"})]}),(0,n.jsxs)("td",{class:"px-5 py-5 border-b border-gray-200 bg-white text-sm",children:[(0,n.jsx)("p",{class:"text-gray-900 whitespace-no-wrap",children:"Sept 25, 2019"}),(0,n.jsx)("p",{class:"text-gray-600 whitespace-no-wrap",children:"Due in 6 days"})]}),(0,n.jsx)("td",{class:"px-5 py-5 border-b border-gray-200 bg-white text-sm",children:(0,n.jsxs)("span",{class:"relative inline-block px-3 py-1 font-semibold text-green-900 leading-tight",children:[(0,n.jsx)("span",{"aria-hidden":!0,class:"absolute inset-0 bg-green-200 opacity-50 rounded-full"}),(0,n.jsx)("span",{class:"relative",children:"Paid"})]})}),(0,n.jsx)("td",{class:"px-5 py-5 border-b border-gray-200 bg-white text-sm text-right",children:(0,n.jsx)("button",{type:"button",class:"inline-block text-gray-500 hover:text-gray-700",children:(0,n.jsx)("svg",{class:"inline-block h-6 w-6 fill-current",viewBox:"0 0 24 24",children:(0,n.jsx)("path",{d:"M12 6a2 2 0 110-4 2 2 0 010 4zm0 8a2 2 0 110-4 2 2 0 010 4zm-2 6a2 2 0 104 0 2 2 0 00-4 0z"})})})})]}),(0,n.jsxs)("tr",{children:[(0,n.jsx)("td",{class:"px-5 py-5 border-b border-gray-200 bg-white text-sm",children:(0,n.jsxs)("div",{class:"flex",children:[(0,n.jsx)("div",{class:"flex-shrink-0 w-10 h-10",children:(0,n.jsx)("img",{class:"w-full h-full rounded-full",src:"https://images.unsplash.com/photo-1540845511934-7721dd7adec3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2.2&w=160&h=160&q=80",alt:""})}),(0,n.jsxs)("div",{class:"ml-3",children:[(0,n.jsx)("p",{class:"text-gray-900 whitespace-no-wrap",children:(0,n.jsx)(e.p,{children:"Devin Childs"})}),(0,n.jsx)("p",{class:"text-gray-600 whitespace-no-wrap",children:"000002"})]})]})}),(0,n.jsxs)("td",{class:"px-5 py-5 border-b border-gray-200 bg-white text-sm",children:[(0,n.jsx)("p",{class:"text-gray-900 whitespace-no-wrap",children:"$20,000"}),(0,n.jsx)("p",{class:"text-gray-600 whitespace-no-wrap",children:"USD"})]}),(0,n.jsxs)("td",{class:"px-5 py-5 border-b border-gray-200 bg-white text-sm",children:[(0,n.jsx)("p",{class:"text-gray-900 whitespace-no-wrap",children:"Sept 14, 2019"}),(0,n.jsx)("p",{class:"text-gray-600 whitespace-no-wrap",children:"Due in 2 weeks"})]}),(0,n.jsx)("td",{class:"px-5 py-5 border-b border-gray-200 bg-white text-sm",children:(0,n.jsxs)("span",{class:"relative inline-block px-3 py-1 font-semibold text-orange-900 leading-tight",children:[(0,n.jsx)("span",{"aria-hidden":!0,class:"absolute inset-0 bg-orange-200 opacity-50 rounded-full"}),(0,n.jsx)("span",{class:"relative",children:"Pending"})]})}),(0,n.jsx)("td",{class:"px-5 py-5 border-b border-gray-200 bg-white text-sm text-right",children:(0,n.jsx)("button",{type:"button",class:"inline-block text-gray-500 hover:text-gray-700",children:(0,n.jsx)("svg",{class:"inline-block h-6 w-6 fill-current",viewBox:"0 0 24 24",children:(0,n.jsx)("path",{d:"M12 6a2 2 0 110-4 2 2 0 010 4zm0 8a2 2 0 110-4 2 2 0 010 4zm-2 6a2 2 0 104 0 2 2
10 00-4 0z"})})})})]}),(0,n.jsxs)("tr",{children:[(0,n.jsx)("td",{class:"px-5 py-5 bg-white text-sm",children:(0,n.jsxs)("div",{class:"flex",children:[(0,n.jsx)("div",{class:"flex-shrink-0 w-10 h-10",children:(0,n.jsx)("img",{class:"w-full h-full rounded-full",src:"https://images.unsplash.com/photo-1522609925277-66fea332c575?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2.2&h=160&w=160&q=80",alt:""})}),(0,n.jsxs)("div",{class:"ml-3",children:[(0,n.jsx)("p",{class:"text-gray-900 whitespace-no-wrap",children:(0,n.jsx)(e.p,{children:"Frederick Nicholas"})}),(0,n.jsx)("p",{class:"text-gray-600 whitespace-no-wrap",children:"000001"})]})]})}),(0,n.jsxs)("td",{class:"px-5 py-5 bg-white text-sm",children:[(0,n.jsx)("p",{class:"text-gray-900 whitespace-no-wrap",children:"$12,000"}),(0,n.jsx)("p",{class:"text-gray-600 whitespace-no-wrap",children:"USD"})]}),(0,n.jsxs)("td",{class:"px-5 py-5 bg-white text-sm",children:[(0,n.jsx)("p",{class:"text-gray-900 whitespace-no-wrap",children:"Sept 6, 2019"}),(0,n.jsx)("p",{class:"text-gray-600 whitespace-no-wrap",children:(0,n.jsx)(e.p,{children:"Due 3 weeks ago"})})]}),(0,n.jsx)("td",{class:"px-5 py-5 bg-white text-sm",children:(0,n.jsxs)("span",{class:"relative inline-block px-3 py-1 font-semibold text-red-900 leading-tight",children:[(0,n.jsx)("span",{"aria-hidden":!0,class:"absolute inset-0 bg-red-200 opacity-50 rounded-full"}),(0,n.jsx)("span",{class:"relative",children:"Overdue"})]})}),(0,n.jsx)("td",{class:"px-5 py-5 bg-white text-sm text-right",children:(0,n.jsx)("button",{type:"button",class:"inline-block text-gray-500 hover:text-gray-700",children:(0,n.jsx)("svg",{class:"inline-block h-6 w-6 fill-current",viewBox:"0 0 24 24",children:(0,n.jsx)("path",{d:"M12 6a2 2 0 110-4 2 2 0 010 4zm0 8a2 2 0 110-4 2 2 0 010 4zm-2 6a2 2 0 104 0 2 2 0 00-4 0z"})})})})]})]})]})})})]})}),"\n",(0,n.jsx)(e.h3,{id:"type-2-2",children:"Type 2"}),"\n",(0,n.jsx)(e.pre,{"data-language":"css","data-theme":"default",hasCopyCode:!0,children:(0,n.jsxs)(e.code,{"data-language":"css","data-theme":"default",children:[(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:' class="flex '}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"flex-col"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:'"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:' class="'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"overflow-x-auto"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:' sm:-mx-6 lg:-mx-8"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:' class="'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"py-2"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"inline-block"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"min-w-full"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" sm:"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"px-6"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" lg:"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"px-8"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:'"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:' class="'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"overflow-hidden"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:'"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"table"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:' class="'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"min-w-full"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"text-center"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:'"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"thead"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:' class="'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"border-b"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:'"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"tr"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"th"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:' scope="col" class="'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"text-sm"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"font-medium"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"text-gray-900"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"px-6"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"py-4"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:'"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:">"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" Class"})}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" </"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"th"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"th"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:' scope="col" class="'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"text-sm"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"font-medium"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"text-gray-900"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"px-6"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"py-4"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:'"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:">"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" Heading"})}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" </"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"th"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"th"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:' scope="col" class="'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"text-sm"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"font-medium"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"text-gray-900"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"px-6"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"py-4"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:'"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:">"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" Heading"})}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" </"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"th"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" </"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"tr"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" </"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"thead"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"tbody"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"tr"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:' class="'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"border-b"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:'"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"td"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:' class="'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"text-sm"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"text-gray-900"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"font-medium"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"px-6"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"py-4"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"whitespace-nowrap"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:'"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:">"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" Default"})}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" </"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"td"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"td"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:' class="'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"text-sm"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"text-gray-900"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"font-light"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"px-6"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"py-4"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"whitespace-nowrap"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:'"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:">"})]}),
1"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" Cell"})}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" </"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"td"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"td"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:' class="'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"text-sm"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"text-gray-900"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"font-light"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"px-6"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"py-4"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"whitespace-nowrap"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:'"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:">"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" Cell"})}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" </"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"td"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" </"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"tr"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"tr"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:' class="'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"border-b"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"bg-blue-100"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"border-blue-200"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:'"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"td"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:' class="'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"text-sm"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"text-gray-900"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"font-medium"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"px-6"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"py-4"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"whitespace-nowrap"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:'"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:">"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" Primary"})}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" </"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"td"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"td"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:' class="'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"text-sm"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"text-gray-900"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"font-light"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"px-6"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"py-4"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"whitespace-nowrap"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:'"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:">"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" Cell"})}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" </"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"td"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"td"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:' class="'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"text-sm"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"text-gray-900"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"font-light"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"px-6"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"py-4"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"whitespace-nowrap"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:'"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:">"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" Cell"})}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" </"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"td"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" </"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"tr"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"tr"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:' class="'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"border-b"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"bg-purple-100"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"border-purple-200"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:'"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"td"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:' class="'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"text-sm"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"text-gray-900"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"font-medium"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"px-6"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"py-4"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"whitespace-nowrap"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:'"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:">"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" Secondary"})}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" </"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"td"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"td"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:' class="'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"text-sm"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"text-gray-900"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"font-light"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"px-6"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"py-4"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"whitespace-nowrap"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:'"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:">"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" Cell"})}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" </"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"td"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"td"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:' class="'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"text-sm"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"text-gray-900"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"font-light"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"px-6"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"py-4"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"whitespace-nowrap"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:'"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:">"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" Cell"})}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" </"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"td"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" </"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"tr"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},childre
1n:"tr"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:' class="'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"border-b"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"bg-green-100"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"border-green-200"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:'"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"td"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:' class="'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"text-sm"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"text-gray-900"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"font-medium"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"px-6"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"py-4"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"whitespace-nowrap"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:'"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:">"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" Success"})}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" </"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"td"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"td"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:' class="'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"text-sm"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"text-gray-900"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"font-light"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"px-6"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"py-4"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"whitespace-nowrap"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:'"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:">"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" Cell"})}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" </"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"td"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"td"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:' class="'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"text-sm"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"text-gray-900"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"font-light"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"px-6"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"py-4"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"whitespace-nowrap"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:'"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:">"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" Cell"})}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" </"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"td"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" </"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"tr"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"tr"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:' class="'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"border-b"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"bg-red-100"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"border-red-200"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:'"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"td"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:' class="'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"text-sm"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"text-gray-900"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"font-medium"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"px-6"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"py-4"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"whitespace-nowrap"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:'"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:">"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" Danger"})}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" </"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"td"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"td"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:' class="'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"text-sm"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"text-gray-900"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"font-light"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"px-6"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"py-4"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"whitespace-nowrap"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:'"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:">"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" Cell"})}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" </"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"td"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"td"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:' class="'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"text-sm"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"text-gray-900"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"font-light"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"px-6"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"py-4"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"whitespace-nowrap"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:'"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:">"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" Cell"})}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" </"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"td"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" </"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"tr"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"tr"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:' class="'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"border-b"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"bg-yellow-100"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"border-yellow-200"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:'"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"td"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:' class="'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"text-sm"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"text-gray-900"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"font-medium"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"px-6"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"py-4"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"whitespace-nowrap"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:'"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:">"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" Warning"})}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" </"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"td"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"td"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:' class="'}),(
10,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"text-sm"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"text-gray-900"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"font-light"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"px-6"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"py-4"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"whitespace-nowrap"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:'"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:">"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" Cell"})}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" </"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"td"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"td"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:' class="'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"text-sm"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"text-gray-900"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"font-light"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"px-6"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"py-4"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"whitespace-nowrap"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:'"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:">"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" Cell"})}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" </"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"td"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" </"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"tr"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"tr"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:' class="'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"border-b"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"bg-indigo-100"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"border-indigo-200"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:'"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"td"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:' class="'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"text-sm"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"text-gray-900"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"font-medium"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"px-6"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"py-4"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"whitespace-nowrap"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:'"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:">"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" Info"})}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" </"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"td"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"td"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:' class="'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"text-sm"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"text-gray-900"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"font-light"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"px-6"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"py-4"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"whitespace-nowrap"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:'"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:">"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" Cell"})}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" </"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"td"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"td"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:' class="'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"text-sm"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"text-gray-900"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"font-light"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"px-6"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"py-4"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"whitespace-nowrap"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:'"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:">"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" Cell"})}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" </"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"td"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" </"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"tr"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"tr"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:' class="'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"border-b"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"bg-gray-50"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"border-gray-200"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:'"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"td"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:' class="'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"text-sm"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"text-gray-900"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"font-medium"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"px-6"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"py-4"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"whitespace-nowrap"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:'"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:">"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" Light"})}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" </"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"td"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"td"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:' class="'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"text-sm"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"text-gray-900"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"font-light"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"px-6"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"py-4"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"whitespace-nowrap"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:'"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:">"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" Cell"})}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" </"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"td"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"td"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:' class="'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"text-sm"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"text-gray-900"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"font-light"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"px-6"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"py-4"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"whitespace-nowrap"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:'
1"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:">"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" Cell"})}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" </"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"td"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" </"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"tr"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"tr"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:' class="'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"border-b"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"bg-gray-800"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"boder-gray-900"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:'"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"td"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:' class="'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"text-sm"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"text-white"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"font-medium"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"px-6"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"py-4"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"whitespace-nowrap"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:'"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:">"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" Dark"})}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" </"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"td"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"td"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:' class="'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"text-sm"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"text-white"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"font-light"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"px-6"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"py-4"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"whitespace-nowrap"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:'"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:">"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" Cell"})}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" </"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"td"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"td"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:' class="'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"text-sm"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"text-white"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"font-light"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"px-6"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"py-4"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"whitespace-nowrap"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:'"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:">"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" Cell"})}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" </"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"td"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" </"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"tr"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" </"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"tbody"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" </"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"table"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" </"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" </"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" </"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" </"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:">"})]})]})}),"\n",(0,n.jsx)("div",{class:"flex flex-col",children:(0,n.jsx)("div",{class:"overflow-x-auto sm:-mx-6 lg:-mx-8",children:(0,n.jsx)("div",{class:"py-2 inline-block min-w-full sm:px-6 lg:px-8",children:(0,n.jsx)("div",{class:"overflow-hidden",children:(0,n.jsxs)("table",{class:"min-w-full text-center",children:[(0,n.jsx)("thead",{class:"border-b",children:(0,n.jsxs)("tr",{children:[(0,n.jsx)("th",{scope:"col",class:"text-sm font-medium text-gray-900 px-6 py-4",children:(0,n.jsx)(e.p,{children:"Class"})}),(0,n.jsx)("th",{scope:"col",class:"text-sm font-medium text-gray-900 px-6 py-4",children:(0,n.jsx)(e.p,{children:"Heading"})}),(0,n.jsx)("th",{scope:"col",class:"text-sm font-medium text-gray-900 px-6 py-4",children:(0,n.jsx)(e.p,{children:"Heading"})})]})}),(0,n.jsxs)("tbody",{children:[(0,n.jsxs)("tr",{class:"border-b",children:[(0,n.jsx)("td",{class:"text-sm text-gray-900 font-medium px-6 py-4 whitespace-nowrap",children:(0,n.jsx)(e.p,{children:"Default"})}),(0,n.jsx)("td",{class:"text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap",children:(0,n.jsx)(e.p,{children:"Cell"})}),(0,n.jsx)("td",{class:"text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap",children:(0,n.jsx)(e.p,{children:"Cell"})})]}),(0,n.jsxs)("tr",{class:"border-b bg-blue-100 border-blue-200",children:[(0,n.jsx)("td",{class:"text-sm text-gray-900 font-medium px-6 py-4 whitespace-nowrap",children:(0,n.jsx)(e.p,{children:"Primary"})}),(0,n.jsx)("td",{class:"text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap",children:(0,n.jsx)(e.p,{children:"Cell"})}),(0,n.jsx)("td",{class:"text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap",children:(0,n.jsx)(e.p,{children:"Cell"})})]}),(0,n.jsxs)("tr",{class:"border-b bg-purple-100 border-purple-200",children:[(0,n.jsx)("td",{class:"text-sm text-gray-900 font-medium px-6 py-4 whitespace-nowrap",children:(0,n.jsx)(e.p,{children:"Secondary"})}),(0,n.jsx)("td",{class:"text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap",children:(0,n.jsx)(e.p,{children:"Cell"})}),(0,n.jsx)("td",{class:"text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap",children:(0,n.jsx)(e.p,{children:"Cell"})})]}),(0,n.jsxs)("tr",{class:"border-b bg-green-100 border-green-200",children:[(0,n.jsx)("td",{class:"text-sm text-gray-900 font-medium px-6 py-4 whitespace-nowrap",children:(0,n.jsx)(e.p,{children:"Success"})}),(0,n.jsx)("td",{class:"text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap",children:(0,n.jsx)(e.p,{children:"Cell"})}),(0,n.jsx)("td",{class:"text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap",children:(0,n.jsx)(e.p,{children:"Cell"})})]}),(0,n.jsxs)("tr",{class:"border-b bg-red-100 border-red-200",children:[(0,n.jsx)("td",{class:"text-sm text-gray-900 font-medium px-6 py-4 whitespace-nowrap",children:(0,n.jsx)(e.p,{children:"Danger"})}),(0,n.jsx)("td",{class:"text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap",children:(0,n.jsx)(e.p,{children:"Cell"})}),(0,n.jsx)("td",{class:"text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap",children:(0,n.jsx)(e.p,{children:"Cell"})})]}),(0,n.jsxs)("tr",{class:"border-b bg-yellow-100 border-yellow-200",children:[(0,n.jsx)("td",{class:"text-sm text-gray-900 font-medium px-6 py-4 whitespace-nowrap",children:(0,n.jsx)(e.p,{children:"Warning"})}),(0,n.jsx)("td",{class:"text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap",children:(0,n.jsx)(e.p,{children:"Cell"})}),(0,n.jsx)("td",{class:"text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap",children:(0,n.jsx)(e.p,{children:"Cell"})})]}),(0,n.jsxs)("tr",{class:"border-b bg-indigo-100 border-indigo-200",children:[(0,n.jsx)("td",{class:"text-sm text-gray-900 font-medium px-6 py-4 whitespace-nowrap",children:(0,n.jsx)(e.p,{children:"Info"})}),(0,n.jsx)("td",{class:"text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap",children:(0,n.jsx)(e.p,{children:"Cell"})}),(0,n.jsx)("td",{class:"text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap",children:(0,n.jsx)(e.p,{children:"Cell"})})]}),(0,n.jsxs)("tr",{class:"border-b bg-gray-50 border-gray-200",children:[(0,n.jsx)("td",{class:"text-sm text-gray-900 font-medium px-6 py-4 whitespace-nowrap",children:(0,n.jsx)(e.p,{children:"Light"})}),(0,n.jsx)("td",{class:"text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap",children:(0,n.jsx)(e.p,{children:"Cell"})}),(0,n.jsx)("td",{class:"text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap",children:(0,n.jsx)(e.p,{children:"Cell"})})]}),(0,n.jsxs)("tr",{class:"border-b bg-gray-800 boder-gray-900",children:[(0,n.jsx)("td",{class:"text-sm text-white font-medium px-6 py-4 whitespace-nowrap",children:(0,n.jsx)(e.p,{children:"Dark"})}),(0,n.jsx)("td",{class:"text-sm text-white font-light px-6 py-4 whitespace-nowrap",children:(0,n.jsx)(e.p,{children:"Cell"})}),(0,n.jsx)("td",{class:"text-sm text-white font-light px-6 py-4 whitespace-nowrap",children:(0,n.jsx)(e.p,{children:"Cell"})})]})]})]})})})})})]})}var T=(0,o.j)(P)},55349:function(s){s.exports={cards:"style_cards__8_saI",card:"style_card__ybhTU",title:"style_title__DheUr"}}},function(s){s.O(0,[1791,3159,4291,9774,2888,179],function(){return s(s.s=66166)}),_N_E=s.O()}]);
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.