var Component=(()=>{var p=Object.create;var r=Object.defineProperty;var F=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var y=Object.getPrototypeOf,b=Object.prototype.hasOwnProperty;var f=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),E=(n,e)=>{for(var a in e)r(n,a,{get:e[a],enumerable:!0})},s=(n,e,a,o)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of h(e))!b.call(n,t)&&t!==a&&r(n,t,{get:()=>e[t],enumerable:!(o=F(e,t))||o.enumerable});return n};var u=(n,e,a)=>(a=n!=null?p(y(n)):{},s(e||!n||!n.__esModule?r(a,"default",{value:n,enumerable:!0}):a,n)),T=n=>s(r({},"__esModule",{value:!0}),n);var i=f((_,c)=>{c.exports=_jsx_runtime});var P={};E(P,{default:()=>g,frontmatter:()=>m});var l=u(i()),m={title:"Tabs",description:"Switch between different views using tabs.",lastUpdated:"08 Oct, 2024"};function d(n){let e=Object.assign({h3:"h3",figure:"figure",pre:"pre",code:"code",span:"span"},n.components),{ComponentShowcase:a}=e;return a||x("ComponentShowcase",!0),(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(e.h3,{id:"default",children:"Default"}),` `,(0,l.jsx)("hr",{}),` `,(0,l.jsx)("br",{}),` `,(0,l.jsx)(a,{name:"tab-style-default",children:(0,l.jsx)(e.figure,{__src__:"preview/components/tab-style-default.tsx",__rawString__:`import { Tab, TabGroup, TabList, TabPanel, TabPanels } from "@headlessui/react"; export default function TabStyleDefault() { return ( Home About Contact Welcome to RetroUI, a retro styled UI library built with React, Tailwind CSS & Headless UI. This is the about section! And, this is the contact section! ); } `,"data-rehype-pretty-code-figure":"",children:(0,l.jsx)(e.pre,{style:{backgroundColor:"#282A36",color:"#f6f6f4"},tabIndex:"0","data-language":"tsx","data-theme":"dracula-soft",children:(0,l.jsxs)(e.code,{"data-language":"tsx","data-theme":"dracula-soft",style:{display:"grid"},children:[(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" { Tab, TabGroup, TabList, TabPanel, TabPanels } "}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:' "'}),(0,l.jsx)(e.span,{style:{color:"#E7EE98"},children:"@headlessui/react"}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:";"})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"export"}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:" default"}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:" function"}),(0,l.jsx)(e.span,{style:{color:"#62E884"},children:" TabStyleDefault"}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:"() {"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:" return"}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" ("})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"TabGroup"}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:">"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"TabList"}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:">"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Tab"}),(0,l.jsx)(e.span,{style:{color:"#62E884",fontStyle:"italic"},children:" className"}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#E7EE98"},children:"px-4 py-1 border-2 border-transparent data-[selected]:border-black data-[selected]:bg-primary-400 data-[selected]:font-semibold focus:outline-none"}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:">"})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" Home"})}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Tab"}),(0,l.jsx)(e.span,{style:{color:"#62E884",fontStyle:"italic"},children:" className"}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#E7EE98"},children:"px-4 py-1 border-2 border-transparent data-[selected]:border-black data-[selected]:bg-primary-400 data-[selected]:font-semibold focus:outline-none"}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:">"})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" About"})}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Tab"}),(0,l.jsx)(e.span,{style:{color:"#62E884",fontStyle:"italic"},children:" className"}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#E7EE98"},children:"px-4 py-1 border-2 border-transparent data-[selected]:border-black data-[selected]:bg-primary-400 data-[selected]:font-semibold focus:outline-none"}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:">"})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" Contact"})}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"TabPanels"}),(0,l.jsx)(e.span,{style:{color:"#62E884",fontStyle:"italic"},children:" className"}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#E7EE98"},children:"border-2 border-black mt-2 p-4"}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:">"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"TabPanel"}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:">"})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" Welcome to RetroUI, a retro styled UI library built with React,"})}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" Tailwind CSS & Headless UI."})}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"TabPanel"}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:">This is the about section!"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"TabPanel"}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:">And, this is the contact section!"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" );"})}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:"}"})})]})})})})]})}function S(n={}){let{wrapper:e}=n.components||{};return e?(0,l.jsx)(e,Object.assign({},n,{children:(0,l.jsx)(d,n)})):d(n)}var g=S;function x(n,e){throw new Error("Expected "+(e?"component":"object")+" `"+n+"` to be defined: you likely forgot to import, pass, or provide it.")}return T(P);})(); ;return Component;