diff --git a/packages/docusaurus-playground/docs/community.mdx b/packages/docusaurus-playground/docs/community.mdx new file mode 100644 index 0000000..fd82e7e --- /dev/null +++ b/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. + + diff --git a/packages/logos-docusaurus-theme/src/client/components/Icon/Icon.tsx b/packages/logos-docusaurus-theme/src/client/components/Icon/Icon.tsx index 5b09ad1..10b0aeb 100644 --- a/packages/logos-docusaurus-theme/src/client/components/Icon/Icon.tsx +++ b/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 => ( ) + +export const IconDiscordWhite = (props: TIconProps): JSX.Element => ( + + + +) + +export const IconTelegramWhite = (props: TIconProps): JSX.Element => ( + + + +) + +export const IconX = (props: TIconProps): JSX.Element => ( + + + +) diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/Community/Community.scss b/packages/logos-docusaurus-theme/src/client/components/mdx/Community/Community.scss new file mode 100644 index 0000000..ec0a088 --- /dev/null +++ b/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; + } +} diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/Community/Community.tsx b/packages/logos-docusaurus-theme/src/client/components/mdx/Community/Community.tsx new file mode 100644 index 0000000..8e1b6d5 --- /dev/null +++ b/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 & { + items?: CommunityItem[] +} + +export const Community: React.FC = ({ + items = [], + ...props +}) => { + const { colorMode } = useColorMode() + + const renderSocialIcon = (type: CommunityType) => { + switch (type) { + case CommunityType.X: + return + case CommunityType.Discord: + return + case CommunityType.Telegram: + return + default: + return null + } + } + + return ( + + ) +} diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/Community/index.ts b/packages/logos-docusaurus-theme/src/client/components/mdx/Community/index.ts new file mode 100644 index 0000000..e8c3ff7 --- /dev/null +++ b/packages/logos-docusaurus-theme/src/client/components/mdx/Community/index.ts @@ -0,0 +1 @@ +export * from './Community' diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/index.ts b/packages/logos-docusaurus-theme/src/client/components/mdx/index.ts index 54cd0c3..5ac7fdf 100644 --- a/packages/logos-docusaurus-theme/src/client/components/mdx/index.ts +++ b/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' diff --git a/packages/logos-docusaurus-theme/src/client/static/icons/discord-white.svg b/packages/logos-docusaurus-theme/src/client/static/icons/discord-white.svg new file mode 100644 index 0000000..a9a9b3e --- /dev/null +++ b/packages/logos-docusaurus-theme/src/client/static/icons/discord-white.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/logos-docusaurus-theme/src/client/static/icons/external-link.svg b/packages/logos-docusaurus-theme/src/client/static/icons/external-link.svg index 01d903e..5dbb5af 100644 --- a/packages/logos-docusaurus-theme/src/client/static/icons/external-link.svg +++ b/packages/logos-docusaurus-theme/src/client/static/icons/external-link.svg @@ -1,3 +1,4 @@ - - - + + + + \ No newline at end of file diff --git a/packages/logos-docusaurus-theme/src/client/static/icons/telegram-white.svg b/packages/logos-docusaurus-theme/src/client/static/icons/telegram-white.svg new file mode 100644 index 0000000..941e6bb --- /dev/null +++ b/packages/logos-docusaurus-theme/src/client/static/icons/telegram-white.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/logos-docusaurus-theme/src/client/static/icons/x.svg b/packages/logos-docusaurus-theme/src/client/static/icons/x.svg new file mode 100644 index 0000000..6b7e64d --- /dev/null +++ b/packages/logos-docusaurus-theme/src/client/static/icons/x.svg @@ -0,0 +1,3 @@ + + +