react-vite-themes
Version:
A test/experimental React theme system created for learning purposes. Features atomic design components, SCSS variables, and dark/light theme support. Not intended for production use.
17 lines (16 loc) • 1.77 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from 'react';
import { cn } from '../../../utils';
import { Icon } from '../Icon';
export const Breadcrumb = ({ items = [], separator = '/', size = 'md', variant = 'default', isRounded = false, className, ...props }) => {
const breadcrumbClasses = cn('breadcrumb', `breadcrumb--${size}`, `breadcrumb--${variant}`, isRounded && 'breadcrumb--rounded', className);
const separatorClasses = cn('breadcrumb__separator', `breadcrumb__separator--${size}`, `breadcrumb__separator--${variant}`);
if (!items || items.length === 0) {
return null;
}
return (_jsx("nav", { className: breadcrumbClasses, "aria-label": "Breadcrumb", ...props, children: _jsx("ol", { className: "breadcrumb__list", children: items.map((item, index) => {
const isLast = index === items.length - 1;
const isClickable = item.href && !isLast;
return (_jsxs("li", { className: "breadcrumb__item", children: [isClickable ? (_jsxs("a", { href: item.href, className: "breadcrumb__link", onClick: item.onClick, children: [item.icon && (_jsx(Icon, { name: item.icon, size: size === 'xs' ? 'sm' : size === 'xl' ? 'lg' : size, className: "breadcrumb__icon" })), _jsx("span", { className: "breadcrumb__text", children: item.label })] })) : (_jsxs("span", { className: "breadcrumb__current", children: [item.icon && (_jsx(Icon, { name: item.icon, size: size === 'xs' ? 'sm' : size === 'xl' ? 'lg' : size, className: "breadcrumb__icon" })), _jsx("span", { className: "breadcrumb__text", children: item.label })] })), !isLast && (_jsx("span", { className: separatorClasses, "aria-hidden": "true", children: separator }))] }, item.id || index));
}) }) }));
};