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.
59 lines (58 loc) • 3.3 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from "react";
import { useTheme } from "../../theme/ThemeProvider";
const Breadcrumb = ({ items, separator = _jsx("span", { style: { margin: "0 8px" }, children: "/" }), onNavigate, styles = {}, className = "", primaryColor, textColor, backgroundColor, borderColor, borderWidth, borderStyle, cornerRadius, fontFamily, fontSize, fontWeight, transitionDuration, spacingfactor, hoverColor, }) => {
const theme = useTheme();
const t = {
primaryColor: primaryColor || theme.primaryColor,
textColor: textColor || theme.textColor,
backgroundColor: backgroundColor || primaryColor || theme.primaryColor,
borderColor: borderColor || theme.borderColor,
borderWidth: borderWidth ?? theme.borderWidth,
borderStyle: borderStyle ?? theme.borderStyle,
cornerRadius: typeof cornerRadius === "number" ? cornerRadius : theme.spacingfactor,
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("nav", { "aria-label": "breadcrumb", style: {
display: "flex",
alignItems: "center",
fontFamily: t.fontFamily,
fontSize: t.fontSize,
background: t.backgroundColor,
color: t.textColor,
border: `${t.borderWidth} ${t.borderStyle} ${t.borderColor}`,
borderRadius: t.cornerRadius,
boxShadow: `2px 2px 0px ${t.borderColor}`,
padding: `${t.spacingfactor}px ${t.spacingfactor * 2}px`,
margin: `${t.spacingfactor}px`,
fontWeight: t.fontWeight,
transition: t.transitionDuration,
...styles,
}, className: className, children: items.map((item, idx) => (_jsxs(React.Fragment, { children: [item.href ? (_jsx("a", { href: item.href, onClick: (e) => {
if (onNavigate) {
e.preventDefault();
onNavigate(item.href);
}
}, style: {
color: t.textColor,
textDecoration: "none",
fontWeight: 600,
transition: `color ${t.transitionDuration}`,
cursor: "pointer",
padding: `0 ${t.spacingfactor / 2}px`,
borderRadius: t.spacingfactor / 2,
background: "rgba(255,255,255,0.08)",
}, onMouseOver: (e) => {
e.currentTarget.style.background =
t.hoverColor;
}, onMouseOut: (e) => {
e.currentTarget.style.background =
"rgba(255,255,255,0.08)";
}, children: item.label })) : (_jsx("span", { style: { color: t.textColor, fontWeight: 600 }, children: item.label })), idx < items.length - 1 && separator] }, item.label + idx))) }));
};
export default Breadcrumb;