diff options
author | August Skare <post@augustskare.no> | 2018-10-18 19:28:44 +0800 |
---|---|---|
committer | August Skare <post@augustskare.no> | 2018-10-18 19:28:44 +0800 |
commit | b158a6d7226fb50ecedcc07da8ef30e5e5690e46 (patch) | |
tree | 3cab0f55e7f8961be4f6ecc49f5a3f503cd21bc9 /packages/dev-tools-pages/ts/components/Header.tsx | |
parent | c616b53c9c95edcc9da34aaaee3b91f5f1787636 (diff) | |
download | dexon-0x-contracts-b158a6d7226fb50ecedcc07da8ef30e5e5690e46.tar dexon-0x-contracts-b158a6d7226fb50ecedcc07da8ef30e5e5690e46.tar.gz dexon-0x-contracts-b158a6d7226fb50ecedcc07da8ef30e5e5690e46.tar.bz2 dexon-0x-contracts-b158a6d7226fb50ecedcc07da8ef30e5e5690e46.tar.lz dexon-0x-contracts-b158a6d7226fb50ecedcc07da8ef30e5e5690e46.tar.xz dexon-0x-contracts-b158a6d7226fb50ecedcc07da8ef30e5e5690e46.tar.zst dexon-0x-contracts-b158a6d7226fb50ecedcc07da8ef30e5e5690e46.zip |
initial commit
Diffstat (limited to 'packages/dev-tools-pages/ts/components/Header.tsx')
-rw-r--r-- | packages/dev-tools-pages/ts/components/Header.tsx | 59 |
1 files changed, 59 insertions, 0 deletions
diff --git a/packages/dev-tools-pages/ts/components/Header.tsx b/packages/dev-tools-pages/ts/components/Header.tsx new file mode 100644 index 000000000..46dce01eb --- /dev/null +++ b/packages/dev-tools-pages/ts/components/Header.tsx @@ -0,0 +1,59 @@ +import * as React from 'react'; +import styled from 'styled-components'; + +import { withContext, Props } from './withContext'; +import Container from './Container'; +import { Small } from './Typography'; + +function Header(props: Props) { + const { icon, title, colors } = props; + + return ( + <Container> + <StyledHeader> + <LogoMark> + <Logo as={icon} color={colors.main} /> + <Title>{title}</Title> + </LogoMark> + + <Link as="a" href="#"> + Built by 0x + </Link> + </StyledHeader> + </Container> + ); +} + +const StyledHeader = styled.header` + display: flex; + justify-content: space-between; + align-items: center; + padding-top: 3.75rem; + padding-bottom: 0.875rem; +`; + +const LogoMark = styled.div` + display: flex; + align-items: center; +`; + +const StyledLogo = styled.div` + color: ${props => props.color} + width: 1.75rem; + height: 1.75rem; +`; + +const Title = styled.h1` + font-size: 1.5rem; + margin: 0; + margin-left: 0.8125rem; +`; + +const StyledLink = styled(Small)` + color: inherit; +`; + +const Link = StyledLink as any; +const Logo = StyledLogo as any; + +export default withContext(Header); |