Create basic layout and navigation for client

webclient/src/Categories.js

@@ -0,0 +1,35 @@
+import React, { Component } from 'react';
+import { Container, Dropdown, Header, Icon, Item, Menu, Segment, Input } from 'semantic-ui-react'
+import { Link } from 'react-router-dom';
+
+class Categories extends Component {
+	render() {
+		const data = this.props.data;
+		const match = this.props.match;
+
+		return (
+<div>
+	<Segment basic>
+		<Header size='large'>Tool Categories</Header>
+	</Segment>
+
+	<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>
+		);
+	}
+}
+
+export default Categories;