@smitch/fluid
Version:
A Next/React ui-component libray.
47 lines (46 loc) • 2.59 kB
JavaScript
'use client';
import { jsx as _jsx } from "react/jsx-runtime";
import { useMemo } from 'react';
import { twMerge } from 'tailwind-merge';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
var sizes = {
sm: 'text-sm',
md: 'text-base',
lg: 'text-lg',
};
var separators = {
slash: 'before:content-["/"]',
arrow: 'before:content-[">"]',
pipe: 'before:content-["|"]',
dot: 'before:content-["•"]',
};
var Breadcrumbs = function (_a) {
var _b = _a.className, className = _b === void 0 ? '' : _b, style = _a.style, _c = _a.size, size = _c === void 0 ? 'md' : _c, _d = _a.homeLabel, homeLabel = _d === void 0 ? 'Home' : _d, _e = _a.separator, separator = _e === void 0 ? 'slash' : _e;
var sizeClasses = useMemo(function () { return sizes[size]; }, [size]);
var separartorContent = useMemo(function () { return separators[separator]; }, [separator]);
var pathname = usePathname();
var paths = [];
if (pathname)
paths = pathname.split('/');
var buildHref = function (path) {
for (var i = 0; i < paths.length; i++) {
if (i === paths.length - 1)
break;
if (paths[1] === path) {
return '/' + path;
}
else if (paths[2] === path) {
return '/' + paths[1] + '/' + path;
}
}
return '';
};
var displayPath = function (path) {
return path.replaceAll('_', ' ');
};
if (paths && paths.length === 2 && paths[paths.length - 1] === '')
paths.length = paths.length - 1;
return pathname === '/' ? (_jsx("nav", {})) : (_jsx("nav", { className: twMerge("breadcrumbs group mx-auto w-full text-dark dark:text-light ".concat(sizeClasses), className), style: style, "aria-label": 'breadcrumb', "data-testid": 'breadcrumbs', children: _jsx("ol", { className: 'flex flex-col md:flex-row', children: paths.map(function (path, index) { return (_jsx("li", { className: "breadcrumb ps-4 capitalize first:ps-0 before:inline-block ".concat(separartorContent, " rtl:before:scale-x-[-1] first:before:content-none before:pe-3 rtl:before:pe-0 rtl:before:ps-3 ").concat(index === paths.length - 1 ? 'active' : ''), "aria-current": index === paths.length - 1 ? 'page' : false, children: index === 0 ? (paths.length === 1 ? ("".concat(homeLabel)) : (_jsx(Link, { href: '/', children: homeLabel }))) : index === paths.length - 1 ? (displayPath(path)) : (_jsx(Link, { href: buildHref(path), children: displayPath(path) })) }, index)); }) }) }));
};
export default Breadcrumbs;