2 lines
2.1 KiB
JavaScript
2 lines
2.1 KiB
JavaScript
import{r as c,j as t}from"./chunk-UIGDSWPH-BhuNDbxn.js";import{C as x}from"./ComponentCard-C2b5w2__.js";import{P as m}from"./main-af3pcbZa.js";const h=({children:a,defaultTab:e,className:r="",onChange:s})=>{const[i,l]=c.useState(e||""),o=b=>{l(b),s&&s(b)};return t.jsx("div",{className:r,children:typeof a=="function"?a(i,o):a})},j=({children:a,className:e=""})=>t.jsx("div",{className:`flex items-center gap-0.5 rounded-lg bg-gray-100 p-0.5 dark:bg-gray-900 ${e}`,children:a}),n=({children:a,tabId:e,isActive:r=!1,onClick:s,className:i=""})=>t.jsx("button",{onClick:s,className:`px-3 py-2 font-medium w-full rounded-md text-theme-sm hover:text-gray-900 dark:hover:text-white ${r?"shadow-theme-xs text-gray-900 dark:text-white bg-white dark:bg-gray-800":"text-gray-500 dark:text-gray-400"} ${i}`,type:"button",children:a}),d=({children:a,tabId:e,isActive:r=!1,className:s=""})=>r?t.jsx("div",{className:s,children:a}):null;function u(){const[a,e]=c.useState("tab1");return t.jsxs(t.Fragment,{children:[t.jsx(m,{title:"React.js Tabs Dashboard | TailAdmin - React.js Admin Dashboard Template",description:"This is React.js Tabs Dashboard page for TailAdmin - React.js Tailwind CSS Admin Dashboard Template"}),t.jsx("div",{className:"space-y-5 sm:space-y-6",children:t.jsx(x,{title:"Default Tabs",children:t.jsxs(h,{defaultTab:"tab1",onChange:e,children:[t.jsxs(j,{children:[t.jsx(n,{tabId:"tab1",isActive:a==="tab1",onClick:()=>e("tab1"),children:"Tab 1"}),t.jsx(n,{tabId:"tab2",isActive:a==="tab2",onClick:()=>e("tab2"),children:"Tab 2"}),t.jsx(n,{tabId:"tab3",isActive:a==="tab3",onClick:()=>e("tab3"),children:"Tab 3"})]}),t.jsxs("div",{className:"mt-4",children:[t.jsx(d,{tabId:"tab1",isActive:a==="tab1",children:t.jsx("p",{className:"text-sm text-gray-600 dark:text-gray-400",children:"Content for Tab 1"})}),t.jsx(d,{tabId:"tab2",isActive:a==="tab2",children:t.jsx("p",{className:"text-sm text-gray-600 dark:text-gray-400",children:"Content for Tab 2"})}),t.jsx(d,{tabId:"tab3",isActive:a==="tab3",children:t.jsx("p",{className:"text-sm text-gray-600 dark:text-gray-400",children:"Content for Tab 3"})})]})]})})})]})}export{u as default};
|