tharikida-ui
Version:
A modern, lightweight React UI component library with built-in theming, accessibility, and full TypeScript support. Create beautiful, responsive, and customizable web apps faster with ready-to-use components for any project.
67 lines (66 loc) • 3.99 kB
JavaScript
"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useTheme } from "../../theme/ThemeProvider";
const Tabs = ({ items, activeKey, onChange, styles = {}, className = "", tabBarExtraContent, primaryColor, secondaryColor, textColor, backgroundColor, borderColor, borderWidth, borderStyle, cornerRadius, fontFamily, fontSize, fontWeight, transitionDuration, spacingfactor, hoverColor, }) => {
const theme = useTheme();
const t = {
primaryColor: primaryColor || theme.primaryColor,
secondaryColor: secondaryColor || theme.secondaryColor,
textColor: textColor || theme.textColor,
backgroundColor: backgroundColor || theme.backgroundColor,
borderColor: borderColor || theme.borderColor,
borderWidth: borderWidth ?? theme.borderWidth,
borderStyle: borderStyle ?? theme.borderStyle,
cornerRadius: typeof cornerRadius === "number" ? cornerRadius : theme.cornerRadius,
fontFamily: fontFamily || theme.fontFamily,
fontSize: fontSize || theme.fontSize,
fontWeight: fontWeight || theme.fontWeight,
transitionDuration: transitionDuration || theme.transitionDuration,
spacingfactor: spacingfactor || theme.spacingfactor,
hoverColor: hoverColor || theme.hoverColor,
};
return (_jsx("div", { style: {
display: "flex",
flexDirection: "column",
fontFamily: t.fontFamily,
fontSize: t.fontSize,
background: t.backgroundColor,
...styles,
}, className: className, children: _jsxs("div", { style: {
display: "flex",
alignItems: "center",
borderBottom: `${t.borderWidth} ${t.borderStyle} ${t.borderColor}`,
}, children: [items.map((tab) => {
const isActive = tab.key === activeKey;
return (_jsxs("button", { onClick: () => !tab.disabled && onChange(tab.key), disabled: tab.disabled, style: {
background: isActive ? t.primaryColor : "transparent",
color: isActive ? t.textColor : t.primaryColor,
border: "none",
borderBottom: isActive
? `${t.borderWidth} solid ${t.secondaryColor}`
: `${t.borderWidth} solid transparent`,
fontWeight: isActive ? 700 : t.fontWeight,
fontSize: t.fontSize,
fontFamily: t.fontFamily,
padding: `${t.spacingfactor * 2}px ${t.spacingfactor * 3}px`,
marginRight: t.spacingfactor * 2,
cursor: tab.disabled ? "not-allowed" : "pointer",
outline: "none",
transition: t.transitionDuration,
opacity: tab.disabled ? 0.5 : 1,
borderRadius: `${t.cornerRadius}px ${t.cornerRadius}px 0 0`,
display: "flex",
alignItems: "center",
gap: t.spacingfactor * 2,
}, onMouseOver: (e) => {
if (!isActive && !tab.disabled)
e.currentTarget.style.background =
t.hoverColor;
}, onMouseOut: (e) => {
if (!isActive && !tab.disabled)
e.currentTarget.style.background =
"transparent";
}, children: [tab.icon && (_jsx("span", { style: { marginRight: t.spacingfactor }, children: tab.icon })), tab.label] }, tab.key));
}), tabBarExtraContent && (_jsx("div", { style: { marginLeft: "auto" }, children: tabBarExtraContent }))] }) }));
};
export default Tabs;