unique-collections/packages/apps/src/Footer/Footer.tsx at ffb8b77524661da3da71127243888ae60ec4f1a8 · UniqueNetwork/unique-collections · 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
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
// Copyright 2017-2021 @polkadot/apps, UseTech authors & contributors
// SPDX-License-Identifier: Apache-2.0

import React, { memo, ReactElement } from 'react';
import styled from 'styled-components';

// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
import packageJson from '../../../../package.json';
import discord from '../../public/logos/discord.svg';
import github from '../../public/logos/github.svg';
import subsocial from '../../public/logos/subsocial.svg';
import telegram from '../../public/logos/telegram.svg';
import twitter from '../../public/logos/twitter.svg';

function Footer ({ className = '' }): ReactElement {
  return (
    <div className={`app-footer ${className || ''}`}>
      <div className='app-footer--container'>
        <div className='app-footer__info'>
          <div className='app-footer__info__powered'>Powered by <a
            href='https://unique.network/'
            rel='noreferrer nooperer'
            target='_blank'
          >Unique Network</a> —
            the NFT chain build for Polkadot and Kusama.
          </div>
          <div className='app-footer__info__version'>Version {(packageJson as { version: string }).version}</div>
        </div>
        <div className='app-footer__social-links'>
          <a
            href='https://t.me/Uniquechain'
            rel='noreferrer nooperer'
            target='_blank'
          >
            <img
              alt='telegram'
              src={telegram as string}
            />
          </a>
          <a
            href='https://twitter.com/Unique_NFTchain'
            rel='noreferrer nooperer'
            target='_blank'
          >
            <img
              alt='twitter'
              src={twitter as string}
            />
          </a>
          <a
            href='https://discord.gg/jHVdZhsakC'
            rel='noreferrer nooperer'
            target='_blank'
          >
            <img
              alt='discord'
              src={discord as string}
            />
          </a>
          <a
            href='https://github.com/UniqueNetwork'
            rel='noreferrer nooperer'
            target='_blank'
          >
            <img
              alt='github'
              src={github as string}
            />
          </a>
          <a
            href='https://app.subsocial.network/@UniqueNetwork_NFT'
            rel='noreferrer nooperer'
            target='_blank'
          >
            <img
              alt='subsocial'
              src={subsocial as string}
            />
          </a>
        </div>
      </div>
    </div>
  );
}

export default memo(styled(Footer)`
  padding: calc(var(--gap)/2) calc((var(--gap) / 2) * 3);
  background: var(--card-background);
  font-size: 14px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);

  .app-footer--container {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .app-footer__info {
    color: var(--foter-text-color);
  }

  .app-footer__social-links {
    display: flex;
    grid-column-gap: var(--gap);

    a {
      display: flex;
      justify-content: center;
    }
  }

  a {
    color: var(--link-color);
  }

  @media (max-width: 1279px) {
    border-top: 1px solid var(--enum-input-border-disabled-color);
  }

  @media (max-width: 767px) {
    padding: var(--gap);

    .app-footer--container {
      align-items: flex-start;
      flex-direction: column;
      grid-row-gap: var(--gap);
    }
  }
`);