@smitch/fluid
Version:
A Next/React ui-component libray.
17 lines (16 loc) • 2.09 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState } from 'react';
import Link from 'next/link';
import { twMerge } from 'tailwind-merge';
import { Button } from '..';
var NavLinks = function (_a) {
var links = _a.links, _b = _a.linkStyles, linkStyles = _b === void 0 ? 'lg:text-dark dark:lg:text-light' : _b, btnBackground = _a.btnBackground, _c = _a.btnColor, btnColor = _c === void 0 ? 'light' : _c, _d = _a.btnLayout, btnLayout = _d === void 0 ? 'square' : _d, _e = _a.btnSize, btnSize = _e === void 0 ? 'md' : _e, onLinkClick = _a.onLinkClick;
var _f = useState(false), isMobileMenuOpen = _f[0], setIsMobileMenuOpen = _f[1];
return (_jsxs("div", { children: [_jsx(Button, { btnBackground: btnBackground, btnColor: btnColor, size: btnSize, layout: btnLayout, title: 'Menu', className: 'lg:hidden focus:outline-none', onClick: function () { return setIsMobileMenuOpen(function (prev) { return !prev; }); }, suppressHydrationWarning: true, children: _jsx("svg", { xmlns: 'http://www.w3.org/2000/svg', fill: 'none', viewBox: '0 0 24 24', stroke: 'currentColor', className: 'w-[1em] h-[1em]', children: _jsx("path", { strokeLinecap: 'round', strokeLinejoin: 'round', strokeWidth: '2', d: isMobileMenuOpen ? 'M6 18L18 6M6 6l12 12' : 'M4 6h16M4 12h16M4 18h16' }) }) }), _jsx("div", { className: twMerge('menu flex gap-4 lg:flex-row lg:static lg:top-auto lg:bg-transparent lg:w-auto lg:h-auto shadow-none', isMobileMenuOpen
? 'absolute top-full left-0 dark:bg-slate-200 bg-slate-600 w-full flex-col h-auto py-4 shadow-lg'
: 'hidden lg:flex'), children: links.map(function (link) { return (_jsx(Link, { href: link.href, className: twMerge('navbar-link px-4 py-0 lg:px-2 lg:py-0 lg:text-xl text-light dark:text-dark', linkStyles), onClick: function () {
setIsMobileMenuOpen(false);
onLinkClick === null || onLinkClick === void 0 ? void 0 : onLinkClick(link.name);
}, children: link.name }, link.name)); }) })] }));
};
export default NavLinks;