Skip to content

Commit 32ba335

Browse files
author
Turbo
committed
Add Rebass primitive for styling and Basic header component
1 parent 143164d commit 32ba335

File tree

23 files changed

+247
-159
lines changed

23 files changed

+247
-159
lines changed

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,7 @@
5050
"react-router": "^4.3.1",
5151
"react-router-dom": "^4.3.1",
5252
"react-universal-component": "^3.0.3",
53+
"rebass": "^3.0.0-12",
5354
"serialize-javascript": "^1.6.0",
5455
"styled-components": "^4.1.3",
5556
"uglifyjs-webpack-plugin": "^2.0.1",

‎src/App/index.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,20 @@
11
import React from 'react';
22
import universal from 'react-universal-component';
33
import { Route, Switch } from 'react-router';
4-
import Nav from 'src/Components/Nav';
4+
import Header from 'src/Components/Header';
55
import Head from 'src/Components/Head';
66
import Loading from 'src/Components/Loading';
77
import { RedirectWithStatus } from 'src/Components/SSR';
88

9-
const UniversalComponent = universal(props => import(`../Containers/${props.page}`), {
9+
const UniversalComponent = universal(props => import(`../Pages/${props.page}`), {
1010
loading: () => <Loading />,
1111
ignoreBabelRename: true,
1212
});
1313

1414
export default ({ lang }) => (
1515
<React.Fragment>
1616
<Head />
17-
<Nav lang={lang} />
17+
<Header lang={lang} />
1818

1919
<Switch>
2020
<Route

‎src/Components/Container/index.js‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import styled from 'styled-components';
2+
import { Box } from 'rebass';
3+
4+
const Container = styled(Box)`
5+
max-width: ${props => props.maxWidth}px;
6+
`;
7+
8+
const FluidContainer = styled(Box)`
9+
max-width: 100%;
10+
`;
11+
12+
Container.defaultProps = {
13+
mx: 'auto',
14+
};
15+
16+
export { Container, FluidContainer };

‎src/Components/HTML/index.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ const Markup = ({
66
<head>
77
<title>Brightizen</title>
88
<meta charSet="utf-8" />
9-
<meta name="theme-color" content="#52c41a">
9+
<meta name="theme-color" content="#1890ff">
1010
1111
${styles}
1212
${pageTitle}

‎src/Components/Header/Brand.js‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import React from 'react';
2+
import styled from 'styled-components';
3+
import { Image } from 'rebass';
4+
import { Link } from 'react-router-dom';
5+
import PropTypes from 'prop-types';
6+
7+
const Brand = ({
8+
to, src, height, ...rest
9+
}) => (
10+
<Link to={to}>
11+
<StyledBrand src={src} height={height} {...rest} />
12+
</Link>
13+
);
14+
15+
const StyledBrand = styled(Image)`
16+
max-width: 100%;
17+
`;
18+
19+
Brand.defaultProps = {
20+
to: '/',
21+
};
22+
23+
Brand.propTypes = {
24+
to: PropTypes.string,
25+
};
26+
27+
export default Brand;

‎src/Components/Header/MainNav.js‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import styled from 'styled-components';
2+
import { Flex } from 'rebass';
3+
4+
const MainNav = styled(Flex)`
5+
max-width: 100%;
6+
box-shadow: 0 0 4px rgba(0, 0, 0, .125);
7+
font-weight: bold;
8+
`;
9+
10+
MainNav.defaultProps = {
11+
mx: 'auto',
12+
};
13+
14+
export default MainNav;

‎src/Components/Header/index.js‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import React from 'react';
2+
import { Anchor, NavLink } from 'src/Components/Navigation';
3+
import PropTypes from 'prop-types';
4+
5+
import logo from 'src/assets/images/full-logo.svg';
6+
import { FluidContainer } from 'src/Components/Container';
7+
import MainNav from './MainNav';
8+
import Brand from './Brand';
9+
10+
const Header = ({ lang }) => (
11+
<MainNav
12+
py={[1, 2, 3]}
13+
px={[3, 4, 5]}
14+
bg="oldPaper"
15+
boxShadow={1}
16+
alignItems="center"
17+
justifyContent="space-between"
18+
>
19+
<Brand to={`/${lang}`} src={logo} height="30px" />
20+
<FluidContainer>
21+
<NavLink to={`/${lang}/about`} mr={2}>About</NavLink>
22+
<NavLink to={`/${lang}/posts`} mr={2}>Posts</NavLink>
23+
<NavLink to={`/${lang}/books`} mr={2}>Books</NavLink>
24+
<NavLink to={`/${lang}/login`} mr={2}>Login</NavLink>
25+
<Anchor href="https://www.facebook.com/brightizen" newpage textColor>Fanpage</Anchor>
26+
</FluidContainer>
27+
</MainNav>
28+
);
29+
30+
Header.propTypes = {
31+
lang: PropTypes.string.isRequired,
32+
};
33+
34+
export default Header;

‎src/Components/Nav/index.js‎

Lines changed: 0 additions & 43 deletions
This file was deleted.

‎src/Components/Navigation/Anchor/index.js‎

Lines changed: 24 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,61 +1,59 @@
11
import React from 'react';
22
import styled from 'styled-components';
33
import PropTypes from 'prop-types';
4+
import { Box } from 'rebass';
45

56
const Anchor = ({
6-
href, imgSrc, imgAlt, children, newpage, ...rest
7+
href, imgSrc, imgAlt, children, newpage, display, textColor, ...rest
78
}) => (
8-
<StyledAnchor
9-
href={href}
10-
target={newpage ? '_blank' : ''}
11-
rel={newpage ? 'noopener' : ''}
12-
{...rest}
13-
>
14-
{
15-
imgSrc
16-
&& <img alt={imgAlt} src={imgSrc} {...rest} />
17-
}
18-
{children}
19-
</StyledAnchor>
9+
<Box css={`display: ${display}`} {...rest}>
10+
<StyledAnchor
11+
href={href}
12+
target={newpage ? '_blank' : ''}
13+
rel={newpage ? 'noopener' : ''}
14+
textColor={textColor}
15+
{...rest}
16+
>
17+
{
18+
imgSrc
19+
&& <img alt={imgAlt} src={imgSrc} {...rest} />
20+
}
21+
{children}
22+
</StyledAnchor>
23+
</Box>
2024
);
2125

2226
const StyledAnchor = styled.a`
2327
justify-content: center;
2428
align-items: center;
25-
text-decoration: none;
2629
cursor: ${props => (props.href ? 'pointer' : 'default')};
27-
display: ${props => (props.display)};
28-
text-decoration: ${props => (props.underline)};
29-
color: ${props => props.theme.colors.secondary};
30-
31-
&:hover {
32-
color: ${props => props.theme.colors.primary};
33-
}
30+
text-decoration: ${props => (props.underline ? 'underline' : 'none')};
31+
color: ${props => (props.textColor ? props.theme.colors.black : props.theme.colors.primary)};
3432
3533
img {
36-
width: ${props => (props.imgwidth)};
34+
max-width: 100%;
3735
height: ${props => (props.imgheight)};
3836
}
3937
`;
4038

4139
Anchor.defaultProps = {
42-
display: 'inline-block',
43-
underline: null,
40+
display: 'inline',
41+
underline: false,
4442
newpage: null,
4543
href: '#',
46-
imgwidth: '100px',
4744
imgheight: '40px',
4845
imgAlt: '',
46+
textColor: false,
4947
};
5048

5149
Anchor.propTypes = {
5250
display: PropTypes.string,
5351
underline: PropTypes.bool,
5452
newpage: PropTypes.bool,
5553
href: PropTypes.string,
56-
imgwidth: PropTypes.string,
5754
imgheight: PropTypes.string,
5855
imgAlt: PropTypes.string,
56+
textColor: PropTypes.bool,
5957
};
6058

6159
export default Anchor;

‎src/Components/Navigation/NavLink/index.js‎

Lines changed: 16 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,36 @@
11
import React from 'react';
22
import styled from 'styled-components';
33
import PropTypes from 'prop-types';
4-
4+
import { Box } from 'rebass';
55
import { Link } from 'react-router-dom';
66

7-
const NavLink = ({ to, ...rest }) => (
8-
<StyledNavLink to={to} {...rest} />
7+
const NavLink = ({
8+
to, display, underline, ...rest
9+
}) => (
10+
<Box css={`display: ${display}`} {...rest}>
11+
<StyledNavLink to={to} {...rest} />
12+
</Box>
913
);
1014

1115
const StyledNavLink = styled(Link)`
12-
justify-content: center;
13-
align-items: center;
1416
cursor: pointer;
15-
display: ${props => props.display};
16-
text-decoration: ${props => props.underline};
17+
text-align: center;
18+
text-decoration: ${props => (props.underline ? 'underline' : 'none')};
19+
color: ${props => props.theme.colors.black};
20+
&:active, &:hover {
21+
color: ${props => props.theme.colors.primary};
22+
}
1723
`;
1824

1925
NavLink.defaultProps = {
2026
display: 'inline',
21-
underline: 'none',
27+
underline: false,
2228
};
2329

2430
NavLink.propTypes = {
25-
to: PropTypes.string.isRequired,
2631
display: PropTypes.string,
27-
underline: PropTypes.string,
32+
to: PropTypes.string.isRequired,
33+
underline: PropTypes.bool,
2834
};
2935

3036
export default NavLink;

0 commit comments

Comments
 (0)