pycon/frontend/src/components/blocks/communities-section.tsx at 084ce5462eef04d482f455c75872f8a95c27dc74 · pythonitalia/pycon · 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
import {
  CardPart,
  Grid,
  Heading,
  MultiplePartsCard,
  MultiplePartsCardCollection,
  SocialLinks,
  Spacer,
  StyledHTMLText,
  Text,
  VerticalStack,
} from "@python-italia/pycon-styleguide";
import { Section } from "@python-italia/pycon-styleguide";
import type { Community } from "~/types";

type Props = {
  title: string;
  communities: Community[];
};

export const CommunitiesSection = ({ title, communities }: Props) => {
  return (
    <Section>
      <Grid cols={3} mdCols={2}>
        {communities.map((community) => {
          const socialLinks = [];
          if (community.mastodonUrl) {
            socialLinks.push({
              icon: "mastodon",
              link: community.mastodonUrl,
            });
          }
          if (community.facebookUrl) {
            socialLinks.push({
              icon: "facebook",
              link: community.facebookUrl,
            });
          }
          if (community.instagramUrl) {
            socialLinks.push({
              icon: "instagram",
              link: community.instagramUrl,
            });
          }
          if (community.linkedinUrl) {
            socialLinks.push({
              icon: "linkedin",
              link: community.linkedinUrl,
            });
          }
          if (community.twitterUrl) {
            socialLinks.push({
              icon: "twitter",
              link: community.twitterUrl,
            });
          }
          if (community.websiteUrl) {
            socialLinks.push({
              icon: "web",
              link: community.websiteUrl,
            });
          }

          return (
            <MultiplePartsCard key={community.name}>
              <CardPart shrink={false}>
                <Heading size={4}>{community.name}</Heading>
              </CardPart>
              <CardPart background="milk" fullHeight={true}>
                {community.logo && (
                  <>
                    <VerticalStack alignItems="center" gap="small">
                      <img
                        src={community.logo}
                        alt={community.name}
                        width={128}
                      />
                    </VerticalStack>
                    <Spacer size="small" />
                  </>
                )}

                <StyledHTMLText text={community.description} baseTextSize={2} />
              </CardPart>
              <CardPart background="milk" shrink={false}>
                <VerticalStack alignItems="center" gap="small">
                  <SocialLinks hoverColor="green" socials={socialLinks} />
                </VerticalStack>
              </CardPart>
            </MultiplePartsCard>
          );
        })}
      </Grid>
    </Section>
  );
};