Add Breadcrumbs

packages/client/src/breadcrumbs/Breadcrumbs.test.tsx

@@ -0,0 +1,32 @@
+import React from 'react'
+import {Breadcrumbs} from './Breadcrumbs'
+import {TestUtils} from '../test-utils'
+import {MemoryRouter} from 'react-router-dom'
+
+const t = new TestUtils()
+
+describe('Breadcrumbs', () => {
+
+  describe('render', () => {
+    it('renders', () => {
+      const {node} = t.render(
+        <MemoryRouter>
+          <Breadcrumbs
+            links={[{
+              name: 'one',
+              to: '/one',
+            }, {
+              name: 'two',
+              to: '/two',
+            }]}
+            current='three'
+          />
+        </MemoryRouter>,
+      )
+      expect(node.innerHTML).toMatch(/href="\/one"/)
+      expect(node.innerHTML).toMatch(/href="\/two"/)
+      expect(node.innerHTML).toMatch(/three/)
+    })
+  })
+
+})

packages/client/src/breadcrumbs/Breadcrumbs.tsx

@@ -0,0 +1,28 @@
+import React from 'react'
+import {Breadcrumb, BreadcrumbItem} from 'bloomer'
+import {Link} from 'react-router-dom'
+
+export interface IBreadcrumbsProps {
+  links: Array<{
+    name: string
+    to: string
+  }>
+  current: string
+}
+
+export class Breadcrumbs extends React.PureComponent<IBreadcrumbsProps> {
+  render() {
+    return (
+      <Breadcrumb>
+        <ul>
+          {this.props.links.map((link, i) => (
+            <BreadcrumbItem key={i}>
+              <Link to={link.to}>{link.name}</Link>
+            </BreadcrumbItem>
+          ))}
+          <BreadcrumbItem>{this.props.current}</BreadcrumbItem>
+        </ul>
+      </Breadcrumb>
+    )
+  }
+}

packages/client/src/breadcrumbs/index.ts

@@ -0,0 +1 @@
+export * from './Breadcrumbs'