Add tool page

webclient/src/Categories.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { Container, Dropdown, Header, Icon, Item, Menu, Segment, Input } from 'semantic-ui-react'
+import { Breadcrumb, Container, Dropdown, Header, Icon, Item, Menu, Segment, Input } from 'semantic-ui-react'
 import { Link } from 'react-router-dom';
 
 class Categories extends Component {
@@ -8,26 +8,26 @@ class Categories extends Component {
 		const match = this.props.match;
 
 		return (
-<div>
-	<Segment basic>
-		<Header size='large'>Tool Categories</Header>
-	</Segment>
+			<div>
+				<Container>
+					<Breadcrumb size='large'>
+						<Breadcrumb.Section active>Categories</Breadcrumb.Section>
+					</Breadcrumb>
 
-	<Container>
-		<Item.Group link unstackable divided>
-			{data.categories.map((x, n) =>
-				<Item as={Link} to={'/' + x.slug} key={n}>
-					<Item.Image size='tiny' src={x.photo} />
-					<Item.Content>
-						<Item.Header>{x.name}</Item.Header>
-						<Item.Description>{x.info}</Item.Description>
-						<Item.Extra>{x.tools.length} tools</Item.Extra>
-					</Item.Content>
-				</Item>
-			)}
-		</Item.Group>
-	</Container>
-</div>
+					<Item.Group link unstackable divided>
+						{data.categories.map((x, n) =>
+							<Item as={Link} to={'/' + x.slug} key={n}>
+								<Item.Image size='tiny' src={x.photo} />
+								<Item.Content>
+									<Item.Header>{x.name}</Item.Header>
+									<Item.Description>{x.info}</Item.Description>
+									<Item.Extra>{x.tools.length} tools</Item.Extra>
+								</Item.Content>
+							</Item>
+						)}
+					</Item.Group>
+				</Container>
+			</div>
 		);
 	}
 }