From 06b26e9f05f048c3ea593a96d2659b6eecf847ea Mon Sep 17 00:00:00 2001
From: Michal Klobukowski <michal.klobukowski@contractors.roche.com>
Date: Fri, 8 Jun 2018 14:48:34 +0200
Subject: [PATCH] Create breadcrumbs component

Feature #13590

Arvados-DCO-1.1-Signed-off-by: Michal Klobukowski <michal.klobukowski@contractors.roche.com>
---
 .../main-app-bar/breadcrumbs/breadcrumbs.tsx  | 58 +++++++++++++++++++
 1 file changed, 58 insertions(+)
 create mode 100644 src/components/main-app-bar/breadcrumbs/breadcrumbs.tsx

diff --git a/src/components/main-app-bar/breadcrumbs/breadcrumbs.tsx b/src/components/main-app-bar/breadcrumbs/breadcrumbs.tsx
new file mode 100644
index 00000000..9803683d
--- /dev/null
+++ b/src/components/main-app-bar/breadcrumbs/breadcrumbs.tsx
@@ -0,0 +1,58 @@
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+
+import * as React from 'react';
+import { Button, Grid, StyleRulesCallback, WithStyles } from '@material-ui/core';
+import ChevronRightIcon from '@material-ui/icons/ChevronRight';
+import { withStyles } from '@material-ui/core';
+
+interface BreadcrumbsDataProps {
+    items: string[]
+}
+
+type BreadcrumbsProps = BreadcrumbsDataProps & WithStyles<CssRules>;
+
+class Breadcrumbs extends React.Component<BreadcrumbsProps> {
+
+    render() {
+        const { classes } = this.props;
+        return <Grid container alignItems="center">
+            {
+                this.getInactiveItems().map((item, index) => (
+                    <React.Fragment key={index}>
+                        <Button color="inherit" className={classes.inactiveItem}>{item}</Button>
+                        <ChevronRightIcon color="inherit" className={classes.inactiveItem} />
+                    </React.Fragment>
+                ))
+            }
+            {
+                this.getActiveItem().map((item, index) => (
+                    <Button key={index} color="inherit">{item}</Button>
+                ))
+            }
+        </Grid>
+    }
+
+    getInactiveItems = () => {
+        return this.props.items.slice(0, -1)
+    }
+
+    getActiveItem = () => {
+        return this.props.items.slice(-1)
+    }
+}
+
+type CssRules = 'inactiveItem'
+
+const styles: StyleRulesCallback<CssRules> = theme => {
+    const { unit } = theme.spacing
+    return {
+        inactiveItem: {
+            opacity: 0.6
+        }
+    }
+}
+
+export default withStyles(styles)(Breadcrumbs)
+
-- 
2.30.2