tec-interface/src/components/Footer.js at 7560da545f144f9da7e838d1936c635d7ee71ef2 · CommonsBuild/tec-interface · 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
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
import React from 'react'
import { GU, Link as AragonLink, textStyle, useTheme } from '@tecommons/ui'
import styled from 'styled-components'

import connect from '../base/connect'
import Layout from './Layout'
import fullLogoSvg from '../assets/fullLogo.svg'

export default function Footer({ compact }) {
  const theme = useTheme()

  return (
    <footer
      css={`
        flex-shrink: 0;
        width: 100%;
        padding: ${5 * GU}px ${compact ? `${3 * GU}px` : 0};
        background-color: #fff;
      `}
    >
      <Layout>
        <div
          css={`
            display: ${compact ? 'block' : 'flex'};
            align-items: flex-start;

            & > div {
              margin-bottom: ${2 * GU}px;

              &:not(:first-child) {
                width: ${25 * GU}px;
              }
            }

            & a {
              color: ${theme.contentSecondary};
            }
          `}
        >
          <div
            css={`
              width: ${40 * GU}px;
            `}
          >
            <img src={fullLogoSvg} height="40" alt="" />
          </div>
          <div>
            <h5
              css={`
                color: ${theme.contentSecondary};
                ${textStyle('title4')};
                margin-bottom: ${1.5 * GU}px;
              `}
            >
              Community
            </h5>
            <Link href={connect.discord} external>
              Discord
            </Link>
            <Link href={connect.github} external>
              Github
            </Link>
            <Link href={connect.twitter} external>
              Twitter
            </Link>
            <Link href={connect.discourse} external>
              Forum
            </Link>
          </div>
          {/* <div>
            <h5
              css={`
                ${textStyle('body1')};
                margin-bottom: ${1.5 * GU}px;
              `}
            >
              Tools
            </h5>
            <Link
              href="https://www.notion.so/1Hive-Community-Handbook-f66d489df85a4011bac681963bfee796"
              external
            >
              Handbook
            </Link>
          </div> */}
        </div>
      </Layout>
    </footer>
  )
}

// TODO: Move to 1hive-ui
const Link = styled(AragonLink)`
  display: block;
  margin-bottom: ${1.5 * GU}px;
  text-align: left;
  text-decoration: none;
`