Create basic layout and navigation for client
This commit is contained in:
parent
9f77ca5215
commit
c081c6ecc3
|
|
@ -5,7 +5,9 @@
|
|||
"dependencies": {
|
||||
"react": "^16.2.0",
|
||||
"react-dom": "^16.2.0",
|
||||
"react-scripts": "1.1.0"
|
||||
"react-router-dom": "^4.2.2",
|
||||
"react-scripts": "1.1.0",
|
||||
"semantic-ui-react": "^0.77.2"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "react-scripts start",
|
||||
|
|
|
|||
|
|
@ -19,6 +19,9 @@
|
|||
work correctly both with client-side routing and a non-root public URL.
|
||||
Learn how to configure a non-root public URL by running `npm run build`.
|
||||
-->
|
||||
|
||||
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.12/semantic.min.css"></link>
|
||||
|
||||
<title>React App</title>
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
|||
|
|
@ -1,28 +0,0 @@
|
|||
.App {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.App-logo {
|
||||
animation: App-logo-spin infinite 20s linear;
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
.App-header {
|
||||
background-color: #222;
|
||||
height: 150px;
|
||||
padding: 20px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.App-title {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
.App-intro {
|
||||
font-size: large;
|
||||
}
|
||||
|
||||
@keyframes App-logo-spin {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
|
@ -1,19 +1,87 @@
|
|||
import React, { Component } from 'react';
|
||||
import logo from './logo.svg';
|
||||
import './App.css';
|
||||
import Categories from './Categories';
|
||||
import Category from './Category';
|
||||
import { Container, Dropdown, Header, Icon, Item, Menu, Segment, Input } from 'semantic-ui-react';
|
||||
import { Link, Route } from 'react-router-dom';
|
||||
|
||||
const fakeData = {
|
||||
categories: [
|
||||
{
|
||||
name: "Woodshop",
|
||||
slug: "woodshop",
|
||||
info: "Some info about the woodshop.",
|
||||
photo: "https://i.imgur.com/RIm8aoG.jpg",
|
||||
tools: [
|
||||
{
|
||||
id: 0,
|
||||
name: "White Bandsaw",
|
||||
photo: "http://wiki.protospace.ca/images/thumb/f/f8/105.jpg/146px-105.jpg",
|
||||
notes: "Requires training. Tighten tension lever prior to use / Loosen tension lever after use. Tension lever is on rear.",
|
||||
wikiId: 105,
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
name: "Jointer",
|
||||
photo: "http://wiki.protospace.ca/images/thumb/6/6f/73.jpg/302px-73.jpg",
|
||||
notes: "Boards must be ABSOLUTELY FREE of nails, staples, screws, or other metal. Check boards thoroughly each and every time, make no presumptions. One mistake will chip the blade and render it useless (drum blades are very expensive).",
|
||||
wikiId: 73,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "Metalshop",
|
||||
slug: "metalshop",
|
||||
info: "Some info about the metalshop",
|
||||
photo: "https://i.imgur.com/A2L2ACY.jpg",
|
||||
tools: [
|
||||
{
|
||||
id: 2,
|
||||
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,
|
||||
},
|
||||
{
|
||||
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,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
class App extends Component {
|
||||
render() {
|
||||
return (
|
||||
<div className="App">
|
||||
<header className="App-header">
|
||||
<img src={logo} className="App-logo" alt="logo" />
|
||||
<h1 className="App-title">Welcome to React</h1>
|
||||
</header>
|
||||
<p className="App-intro">
|
||||
To get started, edit <code>src/App.js</code> and save to reload.
|
||||
</p>
|
||||
<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'}} />
|
||||
|
||||
<Route exact path='/' render={props =>
|
||||
<Categories {...props} data={fakeData} />
|
||||
} />
|
||||
|
||||
<Route exact path='/:category' render={props =>
|
||||
<Category {...props} data={fakeData} />
|
||||
} />
|
||||
|
||||
</div>
|
||||
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
35
webclient/src/Categories.js
Normal file
35
webclient/src/Categories.js
Normal file
|
|
@ -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;
|
||||
38
webclient/src/Category.js
Normal file
38
webclient/src/Category.js
Normal file
|
|
@ -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;
|
||||
|
|
@ -3,6 +3,12 @@ import ReactDOM from 'react-dom';
|
|||
import './index.css';
|
||||
import App from './App';
|
||||
import registerServiceWorker from './registerServiceWorker';
|
||||
import { BrowserRouter } from 'react-router-dom';
|
||||
|
||||
ReactDOM.render((
|
||||
<BrowserRouter>
|
||||
<App />
|
||||
</BrowserRouter>
|
||||
), document.getElementById('root'));
|
||||
|
||||
ReactDOM.render(<App />, document.getElementById('root'));
|
||||
registerServiceWorker();
|
||||
|
|
|
|||
6705
webclient/yarn.lock
Normal file
6705
webclient/yarn.lock
Normal file
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue
Block a user