Create basic layout and navigation for client

webclient/src/Category.js

@@ -0,0 +1,38 @@
+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 Category extends Component {
+	render() {
+		const data = this.props.data;
+		const match = this.props.match;
+
+		const category = data.categories.find((x) => 
+			x.slug == match.params.category
+		);
+
+		return (
+<div>
+	<Segment basic>
+		<Header size='large'>{category.name} Tools</Header>
+	</Segment>
+
+	<Container>
+		<Item.Group link unstackable divided>
+			{category.tools.map((x, n) =>
+				<Item key={n}>
+					<Item.Image size='tiny' src={x.photo} />
+					<Item.Content>
+						<Item.Header>{x.name}</Item.Header>
+						<Item.Extra>Wiki ID: {x.wikiId}</Item.Extra>
+					</Item.Content>
+				</Item>
+			)}
+		</Item.Group>
+	</Container>
+</div>
+		);
+	}
+}
+
+export default Category;