Edgeware-Website/components/layout/footer/footer-social.tsx at 971fa709b663bfc5f1672fcdcc4e2530ec4f2247 · edgeware-network/Edgeware-Website · 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
import * as React from 'react';

import IconTwitter from 'remixicon/icons/Logos/twitter-fill.svg';
import IconTelegram from 'remixicon/icons/Logos/telegram-fill.svg';
import IconDiscord from 'remixicon/icons/Logos/discord-fill.svg';
import IconGithub from 'remixicon/icons/Logos/github-fill.svg';
import IconReddit from 'remixicon/icons/Logos/reddit-fill.svg';
import { socialMediaUrls } from 'data/config';

import IconMatrix from '../../../public/images/common/matrix-logo-white.svg';
import IconPeeranha from '../../../public/images/common/peeranha-logo-white.svg';

const SOCIAL_LINKS = {
  Discord: {
    icon: IconDiscord,
    href: socialMediaUrls.discordUrl,
  },
  Twitter: {
    icon: IconTwitter,
    href: socialMediaUrls.twitterUrl,
  },
  Telegram: {
    icon: IconTelegram,
    href: socialMediaUrls.telegramUrl,
  },
  Github: {
    icon: IconGithub,
    href: socialMediaUrls.githubUrl,
  },
  Reddit: {
    icon: IconReddit,
    href: socialMediaUrls.redditUrl,
  },
  Matrix: {
    icon: IconMatrix,
    href: socialMediaUrls.matrixUrl,
  },
  Peeranha: {
    icon: IconPeeranha,
    href: socialMediaUrls.peeranhaUrl,
  },
};

export const FooterSocial = () => {
  const linkEntries = Object.entries(SOCIAL_LINKS);
  return (
    <div className="flex flex-row items-center justify-start">
      {linkEntries.map(([key, linkData]) => {
        const Icon = linkData.icon;
        if (key === 'Matrix') {
          return (
            <a
              href={linkData.href}
              className="mr-2 opacity-25 hover:opacity-50"
              target="_blank"
              rel="noopener noreferrer"
              key={key}
              aria-label={key}
            >
              <Icon className="h-8 fill-white" />
            </a>
          );
        }

        if (key === 'Peeranha') {
          return (
            <a
              href={linkData.href}
              className="mr-4 opacity-25 hover:opacity-50"
              target="_blank"
              rel="noopener noreferrer"
              key={key}
              aria-label={key}
            >
              <Icon className="h-7 fill-white" />
            </a>
          );
        }

        return (
          <a
            href={linkData.href}
            className="mr-4 opacity-25 hover:opacity-50"
            target="_blank"
            rel="noopener noreferrer"
            key={key}
            aria-label={key}
          >
            <Icon className="h-8 w-8 fill-white" />
          </a>
        );
      })}
    </div>
  );
};