dfsyncjs.github.io/src/components/Header/Header.tsx at 3ee9d783140d1fb7bc25a6b9b31f102e0f16cd3e · dfsyncjs/dfsyncjs.github.io · 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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
import GitHubIcon from '@mui/icons-material/GitHub';
import { AppBar, Box, Button, Container, Toolbar } from '@mui/material';
import { Link as RouterLink } from 'react-router-dom';
import { Brand } from '../Brand/Brand';
import { ThemeToggle } from '../ThemeToggle/ThemeToggle';
import { createTrackedLinkHandler } from '../../services/analytics';

export const Header = () => {
  return (
    <AppBar
      position="sticky"
      color="transparent"
      elevation={0}
      sx={{
        backdropFilter: 'blur(10px)',
        borderBottom: '1px solid',
        borderColor: 'divider',
      }}
    >
      <Container maxWidth="lg">
        <Toolbar disableGutters sx={{ minHeight: 72, gap: 2, justifyContent: 'space-between' }}>
          <Brand />
          <Box sx={{ flexShrink: 0 }}>
            <Button
              component={RouterLink}
              to="/docs"
              color="inherit"
              onClick={createTrackedLinkHandler({
                params: {
                  cta_name: 'docs',
                  location: 'header',
                  label: 'Docs',
                  link_url: '/docs',
                },
              })}
            >
              Docs
            </Button>
            <Button
              color="inherit"
              href="https://www.npmjs.com/package/@dfsync/client"
              target="_blank"
              rel="noreferrer"
              onClick={createTrackedLinkHandler({
                params: {
                  cta_name: 'npm',
                  location: 'header',
                  label: 'npm',
                  link_url: 'https://www.npmjs.com/package/@dfsync/client',
                },
              })}
            >
              npm
            </Button>
            <Button
              color="inherit"
              href="https://github.com/dfsyncjs/dfsync"
              target="_blank"
              rel="noreferrer"
              startIcon={<GitHubIcon />}
              onClick={createTrackedLinkHandler({
                params: {
                  cta_name: 'github',
                  location: 'header',
                  label: 'GitHub',
                  link_url: 'https://github.com/dfsyncjs/dfsync',
                },
              })}
            >
              GitHub
            </Button>
            <ThemeToggle />
          </Box>
        </Toolbar>
      </Container>
    </AppBar>
  );
};