71 lines
1.9 KiB
JavaScript
71 lines
1.9 KiB
JavaScript
|
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;
|