2 lines
2.3 KiB
JavaScript
2 lines
2.3 KiB
JavaScript
import{j as e,r as n}from"./chunk-UIGDSWPH-BhuNDbxn.js";import{C as s}from"./ComponentCard-C2b5w2__.js";import{P as c}from"./main-af3pcbZa.js";const o=({children:r,className:t=""})=>e.jsx("div",{className:`inline-flex rounded-lg border border-gray-300 bg-white shadow-theme-xs dark:border-gray-700 dark:bg-gray-800 ${t}`,children:r}),a=({children:r,onClick:t,isActive:l=!1,className:d="",disabled:i=!1})=>e.jsx("button",{onClick:t,disabled:i,className:`px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-white disabled:opacity-50 disabled:cursor-not-allowed ${l?"bg-gray-100 text-gray-900 dark:bg-white/10 dark:text-white":""} ${d}`,type:"button",children:r});function g(){const[r,t]=n.useState("left");return e.jsxs(e.Fragment,{children:[e.jsx(c,{title:"React.js Button Groups Dashboard | TailAdmin - React.js Admin Dashboard Template",description:"This is React.js Button Groups Dashboard page for TailAdmin - React.js Tailwind CSS Admin Dashboard Template"}),e.jsxs("div",{className:"space-y-5 sm:space-y-6",children:[e.jsx(s,{title:"Default Button Group",children:e.jsxs(o,{children:[e.jsx(a,{isActive:r==="left",onClick:()=>t("left"),className:"rounded-l-lg border-l-0",children:"Left"}),e.jsx(a,{isActive:r==="center",onClick:()=>t("center"),className:"border-l border-r border-gray-300 dark:border-gray-700",children:"Center"}),e.jsx(a,{isActive:r==="right",onClick:()=>t("right"),className:"rounded-r-lg border-r-0",children:"Right"})]})}),e.jsx(s,{title:"Icon Button Group",children:e.jsxs(o,{children:[e.jsx(a,{className:"rounded-l-lg border-l-0",children:e.jsx("svg",{className:"w-5 h-5",fill:"currentColor",viewBox:"0 0 20 20",children:e.jsx("path",{fillRule:"evenodd",d:"M3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z",clipRule:"evenodd"})})}),e.jsx(a,{className:"border-l border-r border-gray-300 dark:border-gray-700",children:e.jsx("svg",{className:"w-5 h-5",fill:"currentColor",viewBox:"0 0 20 20",children:e.jsx("path",{fillRule:"evenodd",d:"M10 3a1 1 0 011 1v12a1 1 0 11-2 0V4a1 1 0 011-1z",clipRule:"evenodd"})})}),e.jsx(a,{className:"rounded-r-lg border-r-0",children:e.jsx("svg",{className:"w-5 h-5",fill:"currentColor",viewBox:"0 0 20 20",children:e.jsx("path",{fillRule:"evenodd",d:"M3 10a1 1 0 011 1h12a1 1 0 110-2H4a1 1 0 01-1-1z",clipRule:"evenodd"})})})]})})]})]})}export{g as default};
|