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.
77 lines (76 loc) • 4.41 kB
JavaScript
"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useTheme } from "../../theme/ThemeProvider";
const Navbar = ({ logo, links = [], rightContent, 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.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 (_jsxs("nav", { style: {
width: "100%",
display: "flex",
alignItems: "center",
justifyContent: "space-between",
background: t.backgroundColor,
color: t.textColor,
fontFamily: t.fontFamily,
fontSize: t.fontSize,
padding: `${t.spacingfactor * 1.5}px ${t.spacingfactor * 3}px`,
borderBottom: `${t.borderWidth} ${t.borderStyle} ${t.borderColor}`,
borderRadius: t.cornerRadius,
boxShadow: `0 2px 0 ${t.borderColor}`,
fontWeight: t.fontWeight,
transition: t.transitionDuration,
...styles,
}, className: className, children: [_jsxs("div", { style: {
display: "flex",
alignItems: "center",
gap: t.spacingfactor,
}, children: [logo && _jsx("div", { style: { marginRight: t.spacingfactor }, children: logo }), links.map((link) => (_jsxs("a", { href: link.href, style: {
color: link.active ? t.primaryColor : t.textColor,
background: link.active ? t.textColor : "rgba(255,255,255,0.08)",
textDecoration: "none",
fontWeight: 700,
margin: `0 ${t.spacingfactor / 2}px`,
padding: `6px 16px`,
borderRadius: t.cornerRadius,
border: link.active ? `2px solid ${t.textColor}` : "none",
boxShadow: link.active ? `0 2px 0 ${t.textColor}` : "none",
transition: `background ${t.transitionDuration}, color ${t.transitionDuration}, border ${t.transitionDuration}`,
cursor: "pointer",
position: "relative",
}, onMouseOver: (e) => {
if (!link.active)
e.currentTarget.style.background =
t.hoverColor;
}, onMouseOut: (e) => {
if (!link.active)
e.currentTarget.style.background =
"rgba(255,255,255,0.08)";
}, children: [link.label, link.active && (_jsx("span", { style: {
position: "absolute",
left: 8,
top: "50%",
transform: "translateY(-50%)",
width: 6,
height: 6,
borderRadius: "50%",
background: t.primaryColor,
border: `2px solid ${t.textColor}`,
marginRight: 8,
display: "inline-block",
} }))] }, link.href)))] }), rightContent && _jsx("div", { children: rightContent })] }));
};
export default Navbar;