1 // Copyright (C) The Arvados Authors. All rights reserved.
3 // SPDX-License-Identifier: AGPL-3.0
5 import * as React from 'react';
6 import { Button, Grid, StyleRulesCallback, WithStyles, Typography, Tooltip } from '@material-ui/core';
7 import ChevronRightIcon from '@material-ui/icons/ChevronRight';
8 import { withStyles } from '@material-ui/core';
10 export interface Breadcrumb {
14 interface BreadcrumbsProps {
16 onClick: (breadcrumb: Breadcrumb) => void;
19 const Breadcrumbs: React.SFC<BreadcrumbsProps & WithStyles<CssRules>> = ({ classes, onClick, items }) => {
20 return <Grid container alignItems="center" wrap="nowrap">
22 items.map((item, index) => {
23 const isLastItem = index === items.length - 1;
25 <React.Fragment key={index}>
26 <Tooltip title={item.label}>
29 className={isLastItem ? classes.currentItem : classes.item}
30 onClick={() => onClick(item)}
35 className={classes.label}
42 !isLastItem && <ChevronRightIcon color="inherit" className={classes.item} />
51 type CssRules = "item" | "currentItem" | "label";
53 const styles: StyleRulesCallback<CssRules> = theme => {
54 const { unit } = theme.spacing;
68 export default withStyles(styles)(Breadcrumbs);