mitchell/react-starter
1
0
Fork 0
mirror of https://github.com/mgerb/react-starter synced 2026-01-09 16:42:48 +00:00
Code Issues Releases Wiki Activity

formatting

Browse Source
This commit is contained in:
Mitchell
2017-08-26 21:23:05 -05:00
parent cc0be44b54
commit 689d1b4df0
10 changed files with 115 additions and 133 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
app/Wrapper.tsx
View File

@@ -8,27 +8,22 @@ import NotFound from './pages/NotFound/NotFound';
//styling //styling
import './scss/index.scss'; import './scss/index.scss';
interface Props { interface Props {}
}
interface State { interface State {}
}
export default class Wrapper extends React.Component<Props, State> { export default class Wrapper extends React.Component<Props, State> {
render() {
render() { return (
return ( <BrowserRouter>
<BrowserRouter> <div>
<div> <Navbar />
<Navbar/> <Switch>
<Switch> <Route exact path="/" component={Home} />
<Route exact path="/" component={Home}/> <Route component={NotFound} />
<Route component={NotFound}/> </Switch>
</Switch> </div>
</div> </BrowserRouter>
</BrowserRouter> );
); }
}
} }

3
app/app.tsx
View File

@@ -3,5 +3,4 @@ import ReactDOM from 'react-dom';
import Wrapper from './Wrapper'; import Wrapper from './Wrapper';
ReactDOM.render( <Wrapper/> ReactDOM.render(<Wrapper />, document.getElementById('app'));
, document.getElementById('app'));

57
app/components/Navbar/Navbar.scss
View File

@@ -1,42 +1,41 @@
@import '../../scss/variables'; @import '../../scss/variables';
.Navbar__nav { .Navbar__nav {
height: 40px; height: 40px;
border-bottom: 1px solid $light3; border-bottom: 1px solid $light3;
display: flex; display: flex;
background-color: $light1; background-color: $light1;
} }
.Navbar__header { .Navbar__header {
display: flex; display: flex;
height: 50px; height: 50px;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding-left: 10px; padding-left: 10px;
padding-right: 10px; padding-right: 10px;
background-color: $dark2; background-color: $dark2;
} }
.Navbar__item { .Navbar__item {
color: $fontPrimary; color: $fontPrimary;
text-decoration: none; text-decoration: none;
width: 100px; width: 100px;
transition: all 0.1s linear; transition: all 0.1s linear;
text-align: center; text-align: center;
line-height: 40px; line-height: 40px;
&:hover { &:hover {
color: $fontSecondary; color: $fontSecondary;
border-bottom: 2px solid $primaryBlue; border-bottom: 2px solid $primaryBlue;
} }
& + .Navbar__item { & + .Navbar__item {
border-left: 1px solid $light3; border-left: 1px solid $light3;
} }
} }
.Navbar__item--active { .Navbar__item--active {
color: $fontSecondary; color: $fontSecondary;
border-bottom: 2px solid $primaryBlue; border-bottom: 2px solid $primaryBlue;
} }

63
app/components/Navbar/Navbar.tsx
View File

@@ -3,36 +3,45 @@ import { NavLink } from 'react-router-dom';
import './Navbar.scss'; import './Navbar.scss';
interface Props { interface Props {}
}
interface State { interface State {}
}
export default class Navbar extends React.Component<Props, State> { export default class Navbar extends React.Component<Props, State> {
constructor(props: Props) {
super(props);
}
constructor(props: Props) { render() {
super(props); return (
} <div className="Navbar">
<div className="Navbar__header">
<span>React Starter</span>
<a href="https://github.com/mgerb/react-webpack2-seed">
GitHub
<i className="fa fa-github" aria-hidden="true" />
</a>
</div>
render() { <div className="Navbar__nav">
return ( <NavLink
<div className="Navbar"> to="/"
<div className="Navbar__header"> className="Navbar__item"
<span>React Starter</span> exact
<a href="https://github.com/mgerb/react-webpack2-seed">GitHub activeClassName="Navbar__item--active"
<i className="fa fa-github" aria-hidden="true"/> >
</a> Home
</div> </NavLink>
<NavLink
<div className="Navbar__nav"> to="/new"
<NavLink to="/" className="Navbar__item" exact activeClassName="Navbar__item--active">Home</NavLink> className="Navbar__item"
<NavLink to="/new" className="Navbar__item" exact activeClassName="Navbar__item--active">New</NavLink> exact
</div> activeClassName="Navbar__item--active"
</div> >
); New
} </NavLink>
</div>
</div>
);
}
} }

4
app/pages/Home/Home.scss
View File

@@ -1,3 +1,3 @@
.Home { .Home {
padding: 10px; padding: 10px;
} }

26
app/pages/Home/Home.tsx
View File

@@ -3,26 +3,16 @@ import { RouteComponentProps } from 'react-router-dom';
import './Home.scss'; import './Home.scss';
interface Props extends RouteComponentProps<any> { interface Props extends RouteComponentProps<any> {}
} interface State {}
interface State {
}
export default class Home extends React.Component<Props, State> { export default class Home extends React.Component<Props, State> {
constructor(props: Props) {
super(props);
}
constructor(props: Props){ render() {
super(props); return <div className="Home">test 123</div>;
} }
render() {
return (
<div className="Home">
test 123
</div>
);
}
} }

8
app/pages/NotFound/NotFound.scss
View File

@@ -1,5 +1,5 @@
.NotFound { .NotFound {
font-size: 20px; font-size: 20px;
text-align: center; text-align: center;
padding-top: 200px; padding-top: 200px;
} }

26
app/pages/NotFound/NotFound.tsx
View File

@@ -3,26 +3,16 @@ import { RouteComponentProps } from 'react-router-dom';
import './NotFound.scss'; import './NotFound.scss';
interface Props extends RouteComponentProps<any> { interface Props extends RouteComponentProps<any> {}
} interface State {}
interface State {
}
export default class NotFound extends React.Component<Props, State> { export default class NotFound extends React.Component<Props, State> {
constructor(props: Props) {
super(props);
}
constructor(props: Props){ render() {
super(props); return <div className="NotFound">404 Not Found</div>;
} }
render() {
return (
<div className="NotFound">
404 Not Found
</div>
);
}
} }

24
app/scss/style.scss
View File

@@ -1,23 +1,23 @@
html { html {
font-family: 'Roboto Condensed', sans-serif; font-family: 'Roboto Condensed', sans-serif;
} }
body { body {
color: $fontPrimary; color: $fontPrimary;
background-color: $light2; background-color: $light2;
} }
.fa { .fa {
margin-right: 5px; margin-right: 5px;
margin-left: 5px; margin-left: 5px;
} }
a { a {
text-decoration: none; text-decoration: none;
color: $fontPrimary; color: $fontPrimary;
transition: all 0.1s linear; transition: all 0.1s linear;
&:hover { &:hover {
color: $primaryBlue; color: $primaryBlue;
} }
} }

2
app/scss/variables.scss
View File

@@ -18,4 +18,4 @@ $dark1: lighten($dark2, 5%);
$dark3: darken($dark2, 5%); $dark3: darken($dark2, 5%);
$fontPrimary: darken($light3, 10%); $fontPrimary: darken($light3, 10%);
$fontSecondary: darken($light3, 20%); $fontSecondary: darken($light3, 20%);