kitten.sh
1import React from 'react';
2import styled from 'styled-components';
3import { Link } from 'react-router-dom';
4
5import formidableLogo from '../../assets/logos/logo-formidable.svg';
6
7const Fixed = styled.header`
8 position: fixed;
9 top: 0;
10 left: 0;
11 right: 0;
12 width: 100%;
13 z-index: 1;
14
15 box-sizing: border-box;
16 height: ${p => p.theme.layout.header};
17
18 background: ${p => p.theme.colors.bg};
19 border-bottom: 1px solid ${p => p.theme.colors.border};
20 padding: 0 ${p => p.theme.spacing.md};
21 box-shadow: ${p => p.theme.shadows.header};
22`;
23
24const Wrapper = styled.div`
25 width: 100%;
26 height: 100%;
27 max-width: ${p => p.theme.layout.page};
28 margin: 0 auto;
29 padding-top: 2px;
30 display: flex;
31 flex-direction: row;
32 align-items: center;
33`;
34
35const BlockLink = styled.a`
36 display: flex;
37 color: inherit;
38 text-decoration: none;
39`;
40
41const ProjectWording = styled(Link)`
42 display: flex;
43 text-decoration: none;
44 font-family: ${p => p.theme.fonts.code};
45 color: ${p => p.theme.colors.accent};
46 margin-left: 0.6ch;
47 font-size: 1.9rem;
48`;
49
50const FormidableLogo = styled.img.attrs(() => ({
51 src: formidableLogo,
52}))`
53 height: 2.8rem;
54 position: relative;
55 top: -0.1rem;
56`;
57
58const Header = () => (
59 <Fixed>
60 <Wrapper>
61 <BlockLink href="https://formidable.com/">
62 <FormidableLogo />
63 </BlockLink>
64 <ProjectWording to="/">urql</ProjectWording>
65 </Wrapper>
66 </Fixed>
67);
68
69export default Header;