CoCalc Logo Icon
StoreFeaturesDocsShareSupportNewsAboutSign UpSign In
sagemathinc

Real-time collaboration for Jupyter Notebooks, Linux Terminals, LaTeX, VS Code, R IDE, and more,
all in one place.

GitHub Repository: sagemathinc/cocalc
 Path: blob/master/src/packages/next/components/landing/social-media-icon-list.tsx
Views: 687
1
import React from "react";

2
import { Flex } from "antd";

3


4
import { Icon, IconName } from "@cocalc/frontend/components/icon";

5
import { COLORS } from "@cocalc/util/theme";

6


7
enum SocialMediaType {

8
  FACEBOOK = "facebook",

9
  GITHUB = "github",

10
  INSTAGRAM = "instagram",

11
  LINKEDIN = "linkedin",

12
  TWITTER = "twitter",

13
  YOUTUBE = "youtube",

14
}

15


16
const ICON_MAP: Record<SocialMediaType, IconName> = {

17
  [SocialMediaType.FACEBOOK]: "facebook-filled",

18
  [SocialMediaType.GITHUB]: "github",

19
  [SocialMediaType.INSTAGRAM]: "instagram",

20
  [SocialMediaType.LINKEDIN]: "linkedin-filled",

21
  [SocialMediaType.TWITTER]: "twitter",

22
  [SocialMediaType.YOUTUBE]: "youtube-filled",

23
};

24


25
export interface SocialMediaIconListProps {

26
  links: Partial<Record<SocialMediaType, string>>;

27
  iconFontSize?: number;

28
  style?: React.CSSProperties;

29
}

30


31
export default function SocialMediaIconList(props: SocialMediaIconListProps) {

32
  const { links, iconFontSize = 12, style = {} } = props;

33


34
  return (

35
    <Flex

36
      align="center"

37
      wrap="wrap"

38
      style={{

39
        fontSize: `${iconFontSize}px`,

40
        ...style,

41
      }}

42
    >

43
      {Object.keys(links)

44
        .sort()

45
        .map((mediaType: SocialMediaType) => (

46
          <a

47
            key={mediaType}

48
            href={links[mediaType]}

49
            target="_blank"

50
            style={{

51
              color: COLORS.GRAY,

52
            }}

53
          >

54
            <Icon

55
              name={ICON_MAP[mediaType]}

56
              style={{ margin: `0 ${iconFontSize / 2}px` }}

57
            />

58
          </a>

59
        ))}

60
    </Flex>

61
  );

62
}

63


64