@smitch/fluid/lib/navbar/NavBar.js

A lightweight, Tailwind-powered React/Next.js UI component library.

'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useMemo } from 'react';
import { twMerge } from 'tailwind-merge';
import NavLinks from './NavLinks';
import NavBrand from './NavBrand';
var placements = {
    top: 'sticky top-0',
    bottom: 'fixed bottom-0',
};
var NavBar = function (_a) {
    var brand = _a.brand, brandSrc = _a.brandSrc, brandStyles = _a.brandStyles, links = _a.links, linkStyles = _a.linkStyles, _b = _a.btnBackground, btnBackground = _b === void 0 ? 'dark' : _b, _c = _a.btnColor, btnColor = _c === void 0 ? 'light' : _c, btnLayout = _a.btnLayout, btnSize = _a.btnSize, children = _a.children, _d = _a.navStyles, navStyles = _d === void 0 ? 'bg-slate-200 dark:bg-slate-600' : _d, onLinkClick = _a.onLinkClick, _e = _a.placement, placement = _e === void 0 ? 'top' : _e, _f = _a.prefetch, prefetch = _f === void 0 ? false : _f;
    var placementClasses = useMemo(function () { return placements[placement]; }, [placement]);
    return (_jsxs("nav", { className: twMerge("".concat(placementClasses, " left-0 w-full z-10 flex justify-between items-center px-4 py-2"), navStyles), children: [brand ? (_jsx(NavBrand, { brand: brand, src: brandSrc, brandStyles: brandStyles })) : (_jsx("div", {})), _jsxs("div", { className: 'flex flex-row-reverse lg:flex-row items-center gap-4', children: [_jsx(NavLinks, { links: links, linkStyles: linkStyles, placement: placement, btnBackground: btnBackground, btnColor: btnColor, btnLayout: btnLayout, btnSize: btnSize, onLinkClick: onLinkClick, prefetch: prefetch }), children] })] }));
};
export default NavBar;
//# sourceMappingURL=NavBar.js.map