@smitch/fluid
Version:
A Next/React ui-component libray.
40 lines (39 loc) • 3.31 kB
JavaScript
'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import Link from 'next/link';
import { useState, useMemo } from 'react';
import { twMerge } from 'tailwind-merge';
import { Button } from '..';
import { HiChevronDown, HiChevronUp } from 'react-icons/hi';
var sizes = {
md: 'text-md',
lg: 'text-lg',
xl: 'text-xl',
};
var showrapClasses = 'max-h-96 min-w-[100px]';
var Dropdown = function (_a) {
var _b = _a.size, size = _b === void 0 ? 'md' : _b, _c = _a.className, className = _c === void 0 ? '' : _c, style = _a.style, links = _a.links, _d = _a.buttonLayout, buttonLayout = _d === void 0 ? 'circle' : _d, _e = _a.buttonBackground, buttonBackground = _e === void 0 ? 'transparent' : _e, _f = _a.buttonColor, buttonColor = _f === void 0 ? 'current' : _f;
var _g = useState(''), show = _g[0], setShow = _g[1];
var sizeClasses = useMemo(function () { return sizes[size]; }, [size]);
var handleClick = function (e, label) {
e.preventDefault();
e.stopPropagation();
label === show ? closeNav() : openNav(label);
};
var handleBlur = function (e) {
e.preventDefault();
closeNav();
};
var openNav = function (label) {
setTimeout(function () {
setShow(label);
}, 0);
};
var closeNav = function () {
setTimeout(function () {
setShow('');
}, 0);
};
return (_jsx("div", { className: twMerge("dropdown group inline-block relative ".concat(sizeClasses), className), style: style, children: _jsx("ul", { className: 'dropdown-list flex flex-col gap-4 md:flex-row;', children: links.map(function (link) { return (_jsxs("li", { className: "flex flex-wrap items-center group whitespace-nowrap ".concat(show === link.label ? 'show' : ''), children: [_jsxs(Link, { href: link.href, onClick: closeNav, className: 'dropdown-link flex flex-row items-center gap-2 no-underline hover:!text-current', children: [link.label, ' ', link.links && (_jsxs(Button, { className: "menu-btn !p-1", onClick: function (e) { return handleClick(e, link.label); }, onBlur: function (e) { return handleBlur(e); }, title: 'Toggle Menu', btnBackground: buttonBackground, btnColor: buttonColor, size: size, layout: buttonLayout, children: [show === link.label ? _jsx(HiChevronUp, {}) : _jsx(HiChevronDown, {}), _jsx("span", { className: 'sr-only', children: "Toggle dropdown menu" })] }))] }), link.links && (_jsx("div", { className: 'absolute left-0 -bottom-2 w-full', children: _jsx("div", { className: "wrap absolute left-0 top-full z-50 overflow-y-auto overflow-x-hidden text-base leading-7 transition-all duration-500 delay-500 ease-in-out ".concat(show ? showrapClasses : 'max-h-0'), children: _jsx("ul", { className: 'ms-0 block w-full border bg-dark text-light dark:bg-light dark:text-dark p-4', children: link.links.map(function (sub) { return (_jsxs("li", { children: [_jsx(Link, { href: sub.href, className: '', children: sub.label }, sub.label), sub.links && (_jsx("ul", { children: sub.links.map(function (subsub) { return (_jsx("li", { className: 'indent-2', children: _jsx(Link, { href: subsub.href, className: '', children: subsub.label }) }, subsub.label)); }) }))] }, sub.label)); }) }) }) }))] }, link.label)); }) }) }));
};
export default Dropdown;