From 5c8b0e2aa03efe8078f8ad3e8daadfc0d5b88454 Mon Sep 17 00:00:00 2001 From: jinhojang6 Date: Wed, 13 Sep 2023 19:37:56 +0900 Subject: [PATCH] feat: implement community component --- .../docusaurus-playground/docs/community.mdx | 37 ++++++++ .../src/client/components/Icon/Icon.tsx | 21 +++++ .../components/mdx/Community/Community.scss | 57 ++++++++++++ .../components/mdx/Community/Community.tsx | 89 +++++++++++++++++++ .../client/components/mdx/Community/index.ts | 1 + .../src/client/components/mdx/index.ts | 1 + .../src/client/static/icons/discord-white.svg | 3 + .../src/client/static/icons/external-link.svg | 7 +- .../client/static/icons/telegram-white.svg | 3 + .../src/client/static/icons/x.svg | 3 + 10 files changed, 219 insertions(+), 3 deletions(-) create mode 100644 packages/docusaurus-playground/docs/community.mdx create mode 100644 packages/logos-docusaurus-theme/src/client/components/mdx/Community/Community.scss create mode 100644 packages/logos-docusaurus-theme/src/client/components/mdx/Community/Community.tsx create mode 100644 packages/logos-docusaurus-theme/src/client/components/mdx/Community/index.ts create mode 100644 packages/logos-docusaurus-theme/src/client/static/icons/discord-white.svg create mode 100644 packages/logos-docusaurus-theme/src/client/static/icons/telegram-white.svg create mode 100644 packages/logos-docusaurus-theme/src/client/static/icons/x.svg 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 @@ + + +