Add tool page

This commit is contained in:
2018-02-02 23:41:30 -07:00
parent c081c6ecc3
commit 976f764123
5 changed files with 153 additions and 65 deletions
+32 -25
View File
@@ -1,6 +1,7 @@
import React, { Component } from 'react';
import Categories from './Categories';
import Category from './Category';
import Tool from './Tool';
import { Container, Dropdown, Header, Icon, Item, Menu, Segment, Input } from 'semantic-ui-react';
import { Link, Route } from 'react-router-dom';
@@ -31,7 +32,7 @@ const fakeData = {
{
name: "Metalshop",
slug: "metalshop",
info: "Some info about the metalshop",
info: "Some info about the metalshop.",
photo: "https://i.imgur.com/A2L2ACY.jpg",
tools: [
{
@@ -39,49 +40,55 @@ const fakeData = {
name: "Tormach CNC",
photo: "http://wiki.protospace.ca/images/thumb/c/cf/49.jpg/320px-49.jpg",
notes: "Must complete Shop Safety, Lathe Training, 3D CAD Training, CAM Training, 1 on 1 Project.",
wikiID: 49,
wikiId: 49,
},
{
id: 3,
name: "Powerfist Bench Grinder",
photo: "http://wiki.protospace.ca/images/thumb/c/cd/39.jpg/298px-39.jpg",
notes: "A bench grinder is for grinding steels or deburring steel or aluminum (if fitted with a wire wheel).",
wikiID: 39,
wikiId: 39,
},
],
},
],
user: {
authorizedTools: [1, 2],
},
};
class App extends Component {
render() {
return (
<div>
<Menu fixed='top' borderless inverted>
<Menu.Item>
<Icon name='bars' size='big' />
</Menu.Item>
<Menu.Item as={Link} to='/'>
<Icon name='home' size='big' />
</Menu.Item>
<Menu.Menu position='right'>
<Menu.Item position='right'>
<Input transparent inverted placeholder='Search...' icon='search' />
</Menu.Item>
</Menu.Menu>
</Menu>
<div style={{height: '54px', display: 'inline-block'}} />
<div>
<Menu fixed='top' borderless inverted>
<Menu.Item>
<Icon name='bars' size='big' />
</Menu.Item>
<Menu.Item as={Link} to='/'>
<Icon name='home' size='big' />
</Menu.Item>
<Menu.Menu position='right'>
<Menu.Item position='right'>
<Input transparent inverted placeholder='Search...' icon='search' />
</Menu.Item>
</Menu.Menu>
</Menu>
<div style={{height: '70px', display: 'inline-block'}} />
<Route exact path='/' render={props =>
<Categories {...props} data={fakeData} />
} />
<Route exact path='/' render={props =>
<Categories {...props} data={fakeData} />
} />
<Route exact path='/:category' render={props =>
<Category {...props} data={fakeData} />
} />
<Route exact path='/:category' render={props =>
<Category {...props} data={fakeData} />
} />
</div>
<Route exact path='/:category/:id' render={props =>
<Tool {...props} data={fakeData} />
} />
</div>
);
}
}