// limelight-nav.jsx — Ported from limelight-nav.tsx
// TypeScript types removed. No lucide-react — inline SVGs.
// CSS tokens use portfolio vars (--accent, --text, --card, --border).
// ─── Default icons ─────────────────────────────────────────────────────────
const _IcoHome = (p) => ;
const _IcoCpu = (p) => ;
const _IcoPkg = (p) => ;
const _IcoFlow = (p) => ;
const _IcoCode = (p) => ;
const _IcoUser = (p) => ;
// ─── LimelightNav ───────────────────────────────────────────────────────────
const LimelightNav = ({
items,
defaultActiveIndex = 0,
onTabChange,
style = {},
className = '',
limelightColor, // override accent color for the limelight bar
}) => {
const [activeIndex, setActiveIndex] = React.useState(defaultActiveIndex);
const [isReady, setIsReady] = React.useState(false);
const navItemRefs = React.useRef([]);
const limelightRef = React.useRef(null);
// Resolve limelight colour: prop > CSS var --accent > fallback blue
const llColor = limelightColor || 'var(--accent, #4F8CFF)';
React.useLayoutEffect(() => {
if (!items || items.length === 0) return;
const ll = limelightRef.current;
const item = navItemRefs.current[activeIndex];
if (ll && item) {
const newLeft = item.offsetLeft + item.offsetWidth / 2 - ll.offsetWidth / 2;
ll.style.left = `${newLeft}px`;
if (!isReady) setTimeout(() => setIsReady(true), 50);
}
}, [activeIndex, isReady, items]);
if (!items || items.length === 0) return null;
const handleClick = (index, itemOnClick) => {
setActiveIndex(index);
onTabChange?.(index);
itemOnClick?.();
};
return (
);
};
window.LimelightNav = LimelightNav;