mitchell/react-starter
1
0
Fork 0
mirror of https://github.com/mgerb/react-starter synced 2026-01-09 08:32: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
import './scss/index.scss';
interface Props {
}
interface Props {}
interface State {
}
interface State {}
export default class Wrapper extends React.Component<Props, State> {
render() {
return (
<BrowserRouter>
<div>
<Navbar/>
<Switch>
<Route exact path="/" component={Home}/>
<Route component={NotFound}/>
</Switch>
</div>
</BrowserRouter>
);
}
render() {
return (
<BrowserRouter>
<div>
<Navbar />
<Switch>
<Route exact path="/" component={Home} />
<Route component={NotFound} />
</Switch>
</div>
</BrowserRouter>
);
}
}

3
app/app.tsx
View File

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

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

@@ -1,42 +1,41 @@
@import '../../scss/variables';
.Navbar__nav {
height: 40px;
border-bottom: 1px solid $light3;
display: flex;
background-color: $light1;
height: 40px;
border-bottom: 1px solid $light3;
display: flex;
background-color: $light1;
}
.Navbar__header {
display: flex;
height: 50px;
align-items: center;
justify-content: space-between;
padding-left: 10px;
padding-right: 10px;
background-color: $dark2;
display: flex;
height: 50px;
align-items: center;
justify-content: space-between;
padding-left: 10px;
padding-right: 10px;
background-color: $dark2;
}
.Navbar__item {
color: $fontPrimary;
text-decoration: none;
width: 100px;
transition: all 0.1s linear;
text-align: center;
line-height: 40px;
&:hover {
color: $fontSecondary;
border-bottom: 2px solid $primaryBlue;
}
& + .Navbar__item {
border-left: 1px solid $light3;
}
color: $fontPrimary;
text-decoration: none;
width: 100px;
transition: all 0.1s linear;
text-align: center;
line-height: 40px;
&:hover {
color: $fontSecondary;
border-bottom: 2px solid $primaryBlue;
}
& + .Navbar__item {
border-left: 1px solid $light3;
}
}
.Navbar__item--active {
color: $fontSecondary;
border-bottom: 2px solid $primaryBlue;
color: $fontSecondary;
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';
interface Props {
}
interface Props {}
interface State {
}
interface State {}
export default class Navbar extends React.Component<Props, State> {
constructor(props: Props) {
super(props);
}
constructor(props: Props) {
super(props);
}
render() {
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() {
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>
<div className="Navbar__nav">
<NavLink to="/" className="Navbar__item" exact activeClassName="Navbar__item--active">Home</NavLink>
<NavLink to="/new" className="Navbar__item" exact activeClassName="Navbar__item--active">New</NavLink>
</div>
</div>
);
}
<div className="Navbar__nav">
<NavLink
to="/"
className="Navbar__item"
exact
activeClassName="Navbar__item--active"
>
Home
</NavLink>
<NavLink
to="/new"
className="Navbar__item"
exact
activeClassName="Navbar__item--active"
>
New
</NavLink>
</div>
</div>
);
}
}

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

@@ -1,3 +1,3 @@
.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';
interface Props extends RouteComponentProps<any> {
interface Props extends RouteComponentProps<any> {}
}
interface State {
}
interface State {}
export default class Home extends React.Component<Props, State> {
constructor(props: Props) {
super(props);
}
constructor(props: Props){
super(props);
}
render() {
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 {
font-size: 20px;
text-align: center;
padding-top: 200px;
}
font-size: 20px;
text-align: center;
padding-top: 200px;
}

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

@@ -3,26 +3,16 @@ import { RouteComponentProps } from 'react-router-dom';
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> {
constructor(props: Props) {
super(props);
}
constructor(props: Props){
super(props);
}
render() {
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 {
font-family: 'Roboto Condensed', sans-serif;
font-family: 'Roboto Condensed', sans-serif;
}
body {
color: $fontPrimary;
background-color: $light2;
color: $fontPrimary;
background-color: $light2;
}
.fa {
margin-right: 5px;
margin-left: 5px;
margin-right: 5px;
margin-left: 5px;
}
a {
text-decoration: none;
color: $fontPrimary;
transition: all 0.1s linear;
&:hover {
color: $primaryBlue;
}
text-decoration: none;
color: $fontPrimary;
transition: all 0.1s linear;
&:hover {
color: $primaryBlue;
}
}

2
app/scss/variables.scss
View File

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