onegraph-changelog/src/Header.js at 33b4e4b946fd95ee0901f5ece1dff6859ea28fbb · OneGraph/onegraph-changelog · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
/* eslint-disable jsx-a11y/anchor-is-valid */
import React from 'react';
import {Box, Heading, Text} from 'grommet';
import Avatar from './Avatar';
import Link from 'next/link';
import ConfigContext from './ConfigContext';
import {PostBox} from './Post';
import {useRouter} from 'next/router';

function Header({gitHub, adminLinks}) {
  const {config} = React.useContext(ConfigContext);
  const {pathname} = useRouter();

  return (
    <>
      <Box margin="medium" style={{position: 'absolute', top: 0, right: 0}}>
        <Avatar gitHub={gitHub} adminLinks={adminLinks} />
      </Box>
      <PostBox>
        <Box
          direction="row"
          align="baseline"
          justify="between"
          pad={{horizontal: 'medium', bottom: 'medium'}}
          wrap={true}
          border={{
            size: 'xsmall',
            side: 'bottom',
            color: 'rgba(0,0,0,0.1)',
          }}>
          <Heading style={{margin: 0}} level={2}>
            <Link href="/">
              <a
                style={
                  pathname === '/'
                    ? {
                        textDecoration: 'none',
                        color: 'inherit',
                        cursor: 'auto',
                      }
                    : {color: 'inherit'}
                }>
                {config.title || 'OneBlog'}
              </a>
            </Link>
          </Heading>

          <a href="https://onegraph.com">
            <Text size="small">Learn more about OneGraph</Text>
          </a>
        </Box>
      </PostBox>
    </>
  );
}

export default Header;