gorbenko.pavel
44 lines
1.2 KiB
TypeScript
44 lines
1.2 KiB
TypeScript
import * as React from 'react';
|
|
import styles from './PageChrome.module.scss';
|
|
import { Icon, IconName } from './Icon';
|
|
|
|
export interface IBreadcrumbItem {
|
|
label: string;
|
|
onClick?: () => void;
|
|
}
|
|
|
|
export const Breadcrumbs: React.FC<{ items: IBreadcrumbItem[] }> = ({ items }) => (
|
|
<div className={styles.bread}>
|
|
{items.map((item, i) => (
|
|
<React.Fragment key={i}>
|
|
{i > 0 && <span className={styles.sep}>◆</span>}
|
|
{item.onClick ? (
|
|
<button className={styles.breadLink} onClick={item.onClick}>{item.label}</button>
|
|
) : (
|
|
<span>{item.label}</span>
|
|
)}
|
|
</React.Fragment>
|
|
))}
|
|
</div>
|
|
);
|
|
|
|
export interface IPageHeaderProps {
|
|
icon: IconName;
|
|
subtitle: string;
|
|
title: string;
|
|
actions?: React.ReactNode;
|
|
}
|
|
|
|
export const PageHeader: React.FC<IPageHeaderProps> = ({ icon, subtitle, title, actions }) => (
|
|
<div className={styles.ph}>
|
|
<div className={styles.phLeft}>
|
|
<div className={styles.phIcon}><Icon name={icon} /></div>
|
|
<div>
|
|
<div className={styles.phSub}>{subtitle}</div>
|
|
<div className={styles.phTitle}>{title}</div>
|
|
</div>
|
|
</div>
|
|
{actions && <div className={styles.phRight}>{actions}</div>}
|
|
</div>
|
|
);
|