aboutsummaryrefslogblamecommitdiffstats
path: root/packages/dev-tools-pages/ts/components/Header.tsx
blob: 8c7154623d0b86ab2b1531af5be7a63ec1d0628a (plain) (tree)
1
2
3
4
5
6
7
8
9


                                       

                                                            
 

                                        
 








                                                              
 







                                                               

                                   

                             



                       
               




                                       

                                           


                            

                       




                              
                                   
                   
                 



                        



                        
                           

                                        


                                 


                                   




                               
                  
import * as React from 'react';
import styled from 'styled-components';

import { ContextInterface, ThemeContext } from 'ts/context';
import { media } from 'ts/variables';

import { Container } from './Container';
import { Small } from './Typography';

const Header: React.StatelessComponent<{}> = () => (
    <ThemeContext.Consumer>
        {({ icon, title, colors }: ContextInterface) => (
            <StyledHeader>
                <Container>
                    <LogoMark>
                        <Logo as={icon} color={colors.main} />
                        <Title>{title}</Title>
                    </LogoMark>

                    <Link as="a" href="https://0xproject.com/">
                        Built by 0x
                    </Link>
                </Container>
            </StyledHeader>
        )}
    </ThemeContext.Consumer>
);

const StyledHeader = styled.header`
    padding-top: 3.75rem;
    padding-bottom: 0.875rem;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    ${Container} {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    ${media.small`padding-top: 2.125rem;`};
`;

const LogoMark = styled.div`
    position: relative;
    height: 1.75rem;
    display: flex;
    align-items: center;
`;

const StyledLogo = styled.div`
    color: ${props => props.color};
    width: 1.75rem;
    height: 100%;
`;

const Title = styled.h1`
    font-size: 1.5rem;
    line-height: 1;
    white-space: nowrap;
    margin-top: 2px;
    margin-bottom: 0;
    margin-left: 0.8125rem;

    ${media.small`font-size: 1.25rem;`};
`;

const StyledLink = styled(Small)`
    :hover {
        text-decoration: underline;
    }
`;

const Link = StyledLink as any;
const Logo = StyledLogo as any;

export { Header };