feat: implement community component

packages/docusaurus-playground/docs/community.mdx

@@ -0,0 +1,37 @@
+---
+title: Join the community
+---
+
+import { Community } from '../../logos-docusaurus-theme/src/client/components/mdx'
+
+# Join the community
+
+Welcome to the Waku community! Whether you are interested in building with Waku, contributing to the network, expanding your knowledge, or staying abreast of our progress, we have something for everyone.
+
+<Community
+  items={[
+    {
+      type: 'x',
+      link: 'https://discord.gg/2NXGrsqmDq',
+      linkLabel: 'Follow us on X',
+    },
+    {
+      type: 'discord',
+      logoSrcDark: '/icons/discord.svg',
+      link: 'https://discord.gg/2NXGrsqmDq',
+      linkLabel: 'Join the community on Discord',
+    },
+    {
+      type: 'telegram',
+      logoSrcDark: '/icons/discord.svg',
+      link: 'https://discord.gg/2NXGrsqmDq',
+      linkLabel: 'Jump in the conversation on Telegram',
+    },
+    {
+      logoSrcDark: '/icons/discord.svg',
+      link: 'https://discord.gg/2NXGrsqmDq',
+      linkLabel:
+        'Share your thoughts on the latest research on the Vac research forum',
+    },
+  ]}
+/>

packages/logos-docusaurus-theme/src/client/components/Icon/Icon.tsx

@@ -27,6 +27,9 @@ import SearchSvg from '../../static/icons/search.svg'
 import StatusSvg from '../../static/icons/status.svg'
 import TelegramSvg from '../../static/icons/telegram.svg'
 import TwitterSvg from '../../static/icons/twitter.svg'
+import DiscordWhiteSvg from '../../static/icons/discord-white.svg'
+import TelegramWhiteSvg from '../../static/icons/telegram-white.svg'
+import XSvg from '../../static/icons/x.svg'
 
 type TIconProps = {
   size?: 's' | 'm' | 'l'
@@ -199,3 +202,21 @@ export const IconExternalLink = (props: TIconProps): JSX.Element => (
     <ExternalLinkSvg />
   </Icon>
 )
+
+export const IconDiscordWhite = (props: TIconProps): JSX.Element => (
+  <Icon {...props}>
+    <DiscordWhiteSvg />
+  </Icon>
+)
+
+export const IconTelegramWhite = (props: TIconProps): JSX.Element => (
+  <Icon {...props}>
+    <TelegramWhiteSvg />
+  </Icon>
+)
+
+export const IconX = (props: TIconProps): JSX.Element => (
+  <Icon {...props}>
+    <XSvg />
+  </Icon>
+)

packages/logos-docusaurus-theme/src/client/components/mdx/Community/Community.scss

@@ -0,0 +1,57 @@
+@use '../../../css/utils';
+@use '../../../css/lsd';
+
+.mdx-community {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 1rem;
+  margin-block: 56px;
+}
+
+.mdx-community__link {
+  text-decoration: none !important;
+  height: fit-content;
+}
+
+.mdx-community__link:hover {
+  text-decoration: underline !important;
+}
+
+.mdx-community__card {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: flex-start;
+  padding: 1rem;
+  border: 1px solid rgb(var(--lsd-border-primary));
+  min-height: 144px;
+}
+
+.mdx-community__row {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+}
+
+.mdx-community__logo {
+  width: 40px !important;
+  height: 40px !important;
+
+  svg {
+    width: 40px !important;
+    height: 40px !important;
+  }
+}
+
+.mdx-community__external-link {
+}
+
+.mdx-community__label {
+  text-align: center;
+}
+
+@include utils.responsive('lg', 'down') {
+  .mdx-community {
+    grid-template-columns: 1fr;
+  }
+}

packages/logos-docusaurus-theme/src/client/components/mdx/Community/Community.tsx

@@ -0,0 +1,89 @@
+import { Typography } from '@acid-info/lsd-react'
+import { useColorMode } from '@docusaurus/theme-common'
+import React from 'react'
+import './Community.scss'
+import {
+  IconX,
+  IconDiscordWhite,
+  IconTelegramWhite,
+  IconExternalLink,
+} from '../../Icon' // '@logos-theme/components/Icon' doesn't work
+
+export enum CommunityType {
+  X = 'x',
+  Discord = 'discord',
+  Telegram = 'telegram',
+  CUSTOM = 'custom',
+}
+
+export type CommunityItem = {
+  logoSrc?: string
+  logoSrcDark?: string
+  link: string
+  linkLabel: string
+  type?: CommunityType
+}
+
+export type CommunityProps = React.HTMLProps<HTMLDivElement> & {
+  items?: CommunityItem[]
+}
+
+export const Community: React.FC<CommunityProps> = ({
+  items = [],
+  ...props
+}) => {
+  const { colorMode } = useColorMode()
+
+  const renderSocialIcon = (type: CommunityType) => {
+    switch (type) {
+      case CommunityType.X:
+        return <IconX className="mdx-community__logo" />
+      case CommunityType.Discord:
+        return <IconDiscordWhite className="mdx-community__logo" />
+      case CommunityType.Telegram:
+        return <IconTelegramWhite className="mdx-community__logo" />
+      default:
+        return null
+    }
+  }
+
+  return (
+    <div className="mdx-community" {...props}>
+      {items.map((item, index) => {
+        const logoSrc = item.logoSrc ?? item.logoSrcDark
+        return (
+          <a href={item.link} className="mdx-community__link" target="_blank">
+            <div key={index} className="mdx-community__card">
+              <div className="mdx-community__row">
+                {typeof item.type !== 'undefined' &&
+                item.type !== CommunityType.CUSTOM ? (
+                  renderSocialIcon(item.type as CommunityType)
+                ) : (
+                  <img
+                    alt={
+                      typeof item.linkLabel === 'string' ? item.linkLabel : ''
+                    }
+                    className="mdx-community__logo"
+                    src={
+                      (colorMode === 'dark'
+                        ? item.logoSrcDark
+                        : item.logoSrc) ?? logoSrc
+                    }
+                  />
+                )}
+                <IconExternalLink className="mdx-community__external-link" />
+              </div>
+              <Typography
+                variant="body1"
+                component="span"
+                className="mdx-community__body1"
+              >
+                {item.linkLabel}
+              </Typography>
+            </div>
+          </a>
+        )
+      })}
+    </div>
+  )
+}

packages/logos-docusaurus-theme/src/client/components/mdx/Community/index.ts

@@ -0,0 +1 @@
+export * from './Community'

packages/logos-docusaurus-theme/src/client/components/mdx/index.ts

@@ -1,6 +1,7 @@
 export * from './Box'
 export * from './CallToActionButton'
 export * from './CallToActionSection'
+export * from './Community'
 export * from './DocMetadata'
 export * from './FeatureList'
 export * from './Hero'