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.
33 lines (32 loc) • 2.9 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from 'react';
import { Link } from 'react-router-dom';
import { Button } from '../../atoms/Button';
import { Icon } from '../../atoms/Icon';
import './PageHeader.scss';
export const PageHeader = ({ title, subtitle, description, actions = [], breadcrumbs = [], variant = 'default', size = 'md', showBackButton = false, onBackClick, backButtonText = 'Back', className = '', children }) => {
const handleBackClick = () => {
if (onBackClick) {
onBackClick();
}
else {
window.history.back();
}
};
const renderBreadcrumbs = () => {
if (breadcrumbs.length === 0)
return null;
return (_jsx("nav", { className: "page-header__breadcrumbs", "aria-label": "Breadcrumb", children: _jsx("ol", { className: "breadcrumb-list", children: breadcrumbs.map((crumb, index) => (_jsxs("li", { className: "breadcrumb-item", children: [crumb.icon && (_jsx(Icon, { name: crumb.icon, className: "breadcrumb-icon" })), crumb.href ? (_jsx(Link, { to: crumb.href, className: "breadcrumb-link", children: crumb.label })) : (_jsx("span", { className: "breadcrumb-text", children: crumb.label })), index < breadcrumbs.length - 1 && (_jsx(Icon, { name: "chevron-right", className: "breadcrumb-separator" }))] }, index))) }) }));
};
const renderActions = () => {
if (actions.length === 0)
return null;
return (_jsx("div", { className: "page-header__actions", children: actions.map((action, index) => (_jsxs(Button, { variant: action.variant || 'primary', size: action.size || 'md', onClick: action.onClick, disabled: action.disabled, className: "page-header__action", children: [action.icon && _jsx(Icon, { name: action.icon, className: "action-icon" }), action.label] }, index))) }));
};
const renderBackButton = () => {
if (!showBackButton)
return null;
return (_jsxs(Button, { variant: "neutral", size: "sm", onClick: handleBackClick, className: "page-header__back-button", children: [_jsx(Icon, { name: "arrow-left", className: "back-icon" }), backButtonText] }));
};
return (_jsx("header", { className: `page-header page-header--${variant} page-header--${size} ${className}`, children: _jsxs("div", { className: "page-header__container", children: [renderBreadcrumbs(), _jsxs("div", { className: "page-header__content", children: [renderBackButton(), _jsxs("div", { className: "page-header__text", children: [subtitle && (_jsx("p", { className: "page-header__subtitle", children: subtitle })), _jsx("h1", { className: "page-header__title", children: title }), description && (_jsx("p", { className: "page-header__description", children: description }))] }), renderActions()] }), children && (_jsx("div", { className: "page-header__children", children: children }))] }) }));
};