Add tool page

webclient/src/Tool.js

@@ -0,0 +1,70 @@
+import React, { Component } from 'react';
+import { Breadcrumb, Button, Container, Dropdown, Header, Icon, Image, Item, Menu, Segment, Table, Input } from 'semantic-ui-react'
+import { Link } from 'react-router-dom';
+
+class Tool extends Component {
+	render() {
+		const data = this.props.data;
+		const user = data.user;
+		const match = this.props.match;
+
+		const category = data.categories.find((x) => 
+			x.slug == match.params.category
+		);
+
+		const tool = category.tools.find((x) => 
+			x.id == match.params.id
+		);
+
+		return (
+			<div>
+				<Container>
+					<Breadcrumb size='large'>
+						<Breadcrumb.Section link as={Link} to='/'>Categories</Breadcrumb.Section>
+						<Breadcrumb.Divider icon='right angle' />
+						<Breadcrumb.Section link as={Link} to={'/' + category.slug}>{category.name}</Breadcrumb.Section>
+						<Breadcrumb.Divider icon='right angle' />
+						<Breadcrumb.Section active>{tool.name}</Breadcrumb.Section>
+					</Breadcrumb>
+
+					<Segment>
+						<Image src={tool.photo} size='medium' centered />
+						<Segment textAlign='center' basic>
+							<Button color='green'>
+								<Icon name='lightning' /> Arm
+							</Button>
+							<Button color='red'>
+								<Icon name='stop' /> Disarm
+							</Button>
+						</Segment>
+
+						<Table basic='very' unstackable>
+							<Table.Body>
+								<Table.Row>
+									<Table.Cell>Cat</Table.Cell>
+									<Table.Cell>Meow</Table.Cell>
+								</Table.Row>
+								<Table.Row>
+									<Table.Cell>Dog</Table.Cell>
+									<Table.Cell warning>
+										<Icon name='attention' />
+										Bark
+									</Table.Cell>
+								</Table.Row>
+								<Table.Row>
+									<Table.Cell>Bird</Table.Cell>
+									<Table.Cell>Chrip</Table.Cell>
+								</Table.Row>
+							</Table.Body>
+						</Table>
+
+						<Header as='h4'>Notes</Header>
+						<p>{tool.notes}</p>
+					</Segment>
+				</Container>
+			</div>
+		);
+	}
+}
+
+export default Tool;