From 306749e98c54fd58619cfda62789348a1686a54e Mon Sep 17 00:00:00 2001 From: Hossein Mehrabi Date: Tue, 10 Oct 2023 16:20:20 +0330 Subject: [PATCH] refactor: use the new Grid component in the Roadmap component; refs #116 --- .../docusaurus-playground/docs/community.mdx | 79 +++++------ .../docusaurus-playground/src/pages/index.mdx | 101 ++++++++++++-- .../components/mdx/Community/Community.scss | 57 -------- .../components/mdx/Community/Community.tsx | 93 ------------- .../client/components/mdx/Community/index.ts | 1 - .../src/client/components/mdx/Grid/Grid.tsx | 103 ++++++++++++--- .../mdx/ProfileCards/ProfileCards.scss | 125 ------------------ .../mdx/ProfileCards/ProfileCards.tsx | 98 -------------- .../components/mdx/ProfileCards/index.ts | 1 - .../components/mdx/Roadmap/Roadmap.scss | 91 ++----------- .../client/components/mdx/Roadmap/Roadmap.tsx | 98 +++----------- .../mdx/SectionHeader/SectionHeader.scss | 26 ++++ .../mdx/SectionHeader/SectionHeader.tsx | 40 ++++++ .../components/mdx/SectionHeader/index.ts | 1 + .../mdx/TimelineItem/TimelineItem.scss | 70 ++++++++++ .../mdx/TimelineItem/TimelineItem.tsx | 69 ++++++++++ .../components/mdx/TimelineItem/index.ts | 1 + .../src/client/components/mdx/index.ts | 4 +- 18 files changed, 446 insertions(+), 612 deletions(-) delete mode 100644 packages/logos-docusaurus-theme/src/client/components/mdx/Community/Community.scss delete mode 100644 packages/logos-docusaurus-theme/src/client/components/mdx/Community/Community.tsx delete mode 100644 packages/logos-docusaurus-theme/src/client/components/mdx/Community/index.ts delete mode 100644 packages/logos-docusaurus-theme/src/client/components/mdx/ProfileCards/ProfileCards.scss delete mode 100644 packages/logos-docusaurus-theme/src/client/components/mdx/ProfileCards/ProfileCards.tsx delete mode 100644 packages/logos-docusaurus-theme/src/client/components/mdx/ProfileCards/index.ts create mode 100644 packages/logos-docusaurus-theme/src/client/components/mdx/SectionHeader/SectionHeader.scss create mode 100644 packages/logos-docusaurus-theme/src/client/components/mdx/SectionHeader/SectionHeader.tsx create mode 100644 packages/logos-docusaurus-theme/src/client/components/mdx/SectionHeader/index.ts create mode 100644 packages/logos-docusaurus-theme/src/client/components/mdx/TimelineItem/TimelineItem.scss create mode 100644 packages/logos-docusaurus-theme/src/client/components/mdx/TimelineItem/TimelineItem.tsx create mode 100644 packages/logos-docusaurus-theme/src/client/components/mdx/TimelineItem/index.ts diff --git a/packages/docusaurus-playground/docs/community.mdx b/packages/docusaurus-playground/docs/community.mdx index 7c0209d..071664b 100644 --- a/packages/docusaurus-playground/docs/community.mdx +++ b/packages/docusaurus-playground/docs/community.mdx @@ -2,47 +2,48 @@ title: Join the community --- -import { Community } from '../../logos-docusaurus-theme/src/client/components/mdx' -import { SocialCard, Grid } from '@site/src/components/mdx' +import { SocialCard, Grid, Box } from '@site/src/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/docusaurus-playground/src/pages/index.mdx b/packages/docusaurus-playground/src/pages/index.mdx index 045c1f5..7bc5666 100644 --- a/packages/docusaurus-playground/src/pages/index.mdx +++ b/packages/docusaurus-playground/src/pages/index.mdx @@ -14,6 +14,9 @@ import { Grid, ProfileCard, ProfileCards, + Roadmap, + SectionHeader, + TimelineItem, } from '../components/mdx' @@ -96,7 +99,7 @@ import { xs={{ cols: 3, gap: '1rem', wrap: false }} md={{ cols: 4, gap: '1rem', wrap: true }} > - + - + - + - + - + - + - + - + - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 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 deleted file mode 100644 index ec0a088..0000000 --- a/packages/logos-docusaurus-theme/src/client/components/mdx/Community/Community.scss +++ /dev/null @@ -1,57 +0,0 @@ -@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 deleted file mode 100644 index 28c9659..0000000 --- a/packages/logos-docusaurus-theme/src/client/components/mdx/Community/Community.tsx +++ /dev/null @@ -1,93 +0,0 @@ -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, - IconGithub, -} from '../../Icon' // '@logos-theme/components/Icon' doesn't work - -export enum CommunityType { - X = 'x', - Discord = 'discord', - Github = 'github', - 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 - case CommunityType.Github: - 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 deleted file mode 100644 index e8c3ff7..0000000 --- a/packages/logos-docusaurus-theme/src/client/components/mdx/Community/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './Community' diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/Grid/Grid.tsx b/packages/logos-docusaurus-theme/src/client/components/mdx/Grid/Grid.tsx index 820dbd5..74a2604 100644 --- a/packages/logos-docusaurus-theme/src/client/components/mdx/Grid/Grid.tsx +++ b/packages/logos-docusaurus-theme/src/client/components/mdx/Grid/Grid.tsx @@ -1,8 +1,14 @@ -import { THEME_BREAKPOINTS } from '@acid-info/lsd-react' +import { + IconButton, + IconButtonGroup, + NavigateBeforeIcon, + NavigateNextIcon, + THEME_BREAKPOINTS, +} from '@acid-info/lsd-react' import { css } from '@emotion/react' import styled from '@emotion/styled' import clsx from 'clsx' -import React from 'react' +import React, { useRef } from 'react' import { lsdUtils } from '../../../lib/lsd.utils' import { GridItem } from './GridItem' @@ -12,9 +18,36 @@ export const Grid: { Item: typeof GridItem } & React.FC = ({ children, ...props }) => { + const ref = useRef(null) + + const scroll = (direction: -1 | 1) => { + const el = ref.current + if (!el) return + + const itemWidth = el.children[0]?.getBoundingClientRect?.()?.width ?? 236 + el.scrollTo({ + behavior: 'smooth', + left: + el.scrollLeft + + (el.getBoundingClientRect()?.width - itemWidth) * direction, + }) + } + return ( - - {children} + +
+ + + + + + + + +
+
+ {children} +
) } @@ -35,11 +68,20 @@ const GridRoot = styled.div<{ xl?: GridBreakpointProps }>` width: 100%; - overflow: hidden; - display: grid; - gap: var(--grid-gap); - grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr)); + .mdx-grid__scroll { + margin-bottom: 2rem; + display: flex; + flex-direction: row; + gap: 0 1rem; + } + + .mdx-grid__content { + display: grid; + gap: var(--grid-gap); + grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr)); + overflow: hidden; + } ${(props) => THEME_BREAKPOINTS.map((key) => { @@ -63,23 +105,44 @@ const GridRoot = styled.div<{ `} ${(typeof bp.wrap === 'undefined' || bp.wrap === true) && - ` - display: grid; - flex-wrap: unset; - overflow-x: unset; - overflow-y: unset; - scroll-snap-type: unset; + css` + .mdx-grid__scroll { + display: none; + } + .mdx-grid__content { + display: grid; + flex-wrap: unset; + overflow-x: unset; + overflow-y: unset; + scroll-snap-type: unset; + } `} ${typeof bp.wrap !== 'undefined' && bp.wrap === false && - ` - display: flex; - flex-wrap: nowrap; - overflow-x: scroll; - overflow-y: hidden; - scroll-snap-type: x mandatory; + css` + .mdx-grid__scroll { + display: flex; + } + .mdx-grid__content { + display: flex; + flex-wrap: nowrap; + overflow-x: scroll; + overflow-y: hidden; + scroll-snap-type: x mandatory; + } `} `) })} + + ${(props) => + lsdUtils.responsive( + props.theme as any, + 'sm', + 'down', + )(css` + .mdx-grid__scroll { + display: none !important; + } + `)} ` diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/ProfileCards/ProfileCards.scss b/packages/logos-docusaurus-theme/src/client/components/mdx/ProfileCards/ProfileCards.scss deleted file mode 100644 index 108967c..0000000 --- a/packages/logos-docusaurus-theme/src/client/components/mdx/ProfileCards/ProfileCards.scss +++ /dev/null @@ -1,125 +0,0 @@ -@use '../../../css/utils'; -@use '../../../css/lsd'; - -:root { - --card-height: 188px; - --mobile-width: 253px; - --mobile-height: 176px; -} - -.mdx-profile-cards { - display: grid; - grid-template-columns: repeat(4, minmax(0, 1fr)); - gap: 1rem; - margin-block: 80px; -} - -.mdx-profile-card__card { - display: flex; - flex-direction: column; - justify-content: space-between; - align-items: flex-start; - padding: 1rem; - border: 1px solid rgb(var(--lsd-border-primary)); - height: var(--card-height); -} - -.mdx-profile-card__profile { - display: flex; - flex-direction: column; - gap: 20px; -} - -.mdx-profile-card__avatar { - width: 40px !important; - height: 40px !important; - border-radius: 50%; - - svg { - width: 40px !important; - height: 40px !important; - - rect { - fill: unset !important; - } - } -} - -.mdx-profile-card__name { - @include lsd.typography('h4'); -} - -.mdx-profile-card__buttons { - display: flex; - flex-direction: row; - gap: 8px; - width: 100%; -} - -.mdx-profile-card__link { - text-decoration: none; - height: fit-content; - position: relative; - max-width: calc(50% - 4px); -} - -.mdx-profile-card__button { - padding: 4px 12px 4px 10px !important; - height: 28px !important; - max-width: 100% !important; - - > span { - display: flex; - gap: 12px; - align-items: center; - } - - svg { - width: 14px; - height: 14px; - } -} - -.mdx-profile-card__link__label { - display: -webkit-box; - -webkit-line-clamp: 1; - -webkit-box-orient: vertical; - overflow: hidden; -} - -.mdx-profile-card__label { - text-align: center; -} - -@include utils.responsive('lg', 'down') { - .mdx-profile-card { - grid-template-columns: 1fr; - } -} - -@include utils.responsive('md', 'down') { - .mdx-profile-cards { - display: flex; - flex-wrap: nowrap; - overflow-x: scroll; - overflow-y: hidden; - gap: 1rem; - scroll-snap-type: x mandatory; - margin-block: 40px; - } - - .mdx-profile-card__card { - flex: 0 0 var(--mobile-width); - width: var(--mobile-width); - height: var(--mobile-height); - scroll-snap-align: start !important; - } - - .mdx-profile-card__profile { - gap: 16px; - } - - .mdx-profile-card__name { - @include lsd.typography('h6'); - } -} diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/ProfileCards/ProfileCards.tsx b/packages/logos-docusaurus-theme/src/client/components/mdx/ProfileCards/ProfileCards.tsx deleted file mode 100644 index 41c61d1..0000000 --- a/packages/logos-docusaurus-theme/src/client/components/mdx/ProfileCards/ProfileCards.tsx +++ /dev/null @@ -1,98 +0,0 @@ -import { Button, Typography } from '@acid-info/lsd-react' -import React from 'react' -import './ProfileCards.scss' -import { IconAvatar, IconDiscordWhite, IconGithub } from '../../Icon' // '@logos-theme/components/Icon' doesn't work -import Link from '@docusaurus/Link' - -export type ProfileCardItem = { - imgSrc?: string - name?: string - githubUsername?: string - githubLink?: string - discordUsername?: string - discordLink?: string -} - -export type ProfileCardsProps = React.HTMLProps & { - items?: ProfileCardItem[] -} - -export const ProfileCards: React.FC = ({ - items = [], - ...props -}) => { - return ( -
- {items.map((item, index) => { - return ( -
-
- {typeof item.imgSrc === 'undefined' ? ( - - ) : ( - {typeof - )} - - {item.name} - -
- -
- {item?.githubUsername && item?.githubLink && ( - - - - )} - - {item?.discordUsername && item?.discordLink && ( - - - - )} -
-
- ) - })} -
- ) -} diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/ProfileCards/index.ts b/packages/logos-docusaurus-theme/src/client/components/mdx/ProfileCards/index.ts deleted file mode 100644 index 3127a93..0000000 --- a/packages/logos-docusaurus-theme/src/client/components/mdx/ProfileCards/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './ProfileCards' diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/Roadmap/Roadmap.scss b/packages/logos-docusaurus-theme/src/client/components/mdx/Roadmap/Roadmap.scss index e4d9f58..6f6240e 100644 --- a/packages/logos-docusaurus-theme/src/client/components/mdx/Roadmap/Roadmap.scss +++ b/packages/logos-docusaurus-theme/src/client/components/mdx/Roadmap/Roadmap.scss @@ -18,83 +18,18 @@ } } -.mdx-roadmap__actions { +.mdx-roadmap__timeline { margin-top: 7.25rem; - display: flex; - flex-direction: row; - gap: 0 1rem; -} - -.mdx-roadmap__timeline { - margin-top: 2rem; - display: flex; - flex-direction: row; - flex-wrap: nowrap; - gap: 0 1rem; - overflow-y: scroll; - scroll-snap-type: x mandatory; + .mdx-grid-item:last-child { + .mdx-timeline-item__border { + display: none; + } + } } .mdx-roadmap__timeline-item { - width: 236px; - gap: 1rem; - flex: 0 0 auto; - display: flex; - flex-direction: column; - padding-bottom: 23px; - border-bottom: 1px solid rgb(var(--lsd-border-primary)); - scroll-snap-align: start !important; -} - -.mdx-roadmap__timeline-header { - display: flex; - flex-direction: column; - align-items: flex-start; - gap: 1rem; -} - -.mdx-roadmap__timeline-period-container { - width: 100%; - position: relative; -} - -.mdx-roadmap__timeline-border { - top: 0; - left: 0; - width: calc(100% + 1rem); - height: 50%; - position: absolute; - border-bottom: 1px solid rgb(var(--lsd-border-primary)); - z-index: -1; -} - -.mdx-roadmap__timeline-border--dashed { - border-bottom-style: dashed; -} - -.mdx-roadmap__timeline-period { - padding: 3px 12px; - display: inline-block; - border-radius: 10rem; - color: rgb(var(--lsd-text-secondary)) !important; - background-color: rgb(var(--lsd-surface-secondary)); -} - -.mdx-roadmap__timeline-item:last-child { - .mdx-roadmap__timeline-border { - display: none; - } -} - -.mdx-roadmap--top-aligned { -} - -.mdx-roadmap--bottom-aligned { - .mdx-roadmap__timeline-item { - min-height: 308px; - justify-content: space-between; - } + height: 100%; } @include utils.responsive('lg', 'down') { @@ -106,17 +41,7 @@ } } - .mdx-roadmap__actions { + .mdx-roadmap__timeline { margin-top: 4rem; } - - .mdx-roadmap__timeline-item { - width: 204px; - } -} - -@include utils.responsive('sm', 'down') { - .mdx-roadmap__scroll { - display: none; - } } diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/Roadmap/Roadmap.tsx b/packages/logos-docusaurus-theme/src/client/components/mdx/Roadmap/Roadmap.tsx index 1a9c6d1..9f5b4d1 100644 --- a/packages/logos-docusaurus-theme/src/client/components/mdx/Roadmap/Roadmap.tsx +++ b/packages/logos-docusaurus-theme/src/client/components/mdx/Roadmap/Roadmap.tsx @@ -1,28 +1,18 @@ -import { - IconButton, - IconButtonGroup, - NavigateBeforeIcon, - NavigateNextIcon, - Typography, -} from '@acid-info/lsd-react' +import { Typography } from '@acid-info/lsd-react' import clsx from 'clsx' -import React, { useRef } from 'react' +import React from 'react' +import { Grid } from '..' +import { TimelineItem, TimelineItemProps } from '../TimelineItem' import './Roadmap.scss' -export type TimelineItem = { - period: string - description: string - borderStyle?: 'solid' | 'dashed' -} - export type RoadmapProps = Omit< React.HTMLAttributes, 'title' > & { title: React.ReactNode description?: React.ReactNode - timeline?: TimelineItem[] alignment?: 'top' | 'bottom' + timeline?: Partial[] } export const Roadmap: React.FC = ({ @@ -34,21 +24,6 @@ export const Roadmap: React.FC = ({ children, ...props }) => { - const timelineRef = useRef(null) - - const scroll = (direction: -1 | 1) => { - const el = timelineRef.current - if (!el) return - - const itemWidth = el.children[0]?.getBoundingClientRect?.()?.width ?? 236 - el.scrollTo({ - behavior: 'smooth', - left: - el.scrollLeft + - (el.getBoundingClientRect()?.width - itemWidth) * direction, - }) - } - return (
= ({ )}
-
- {children &&
{children}
} -
- - - - - - - - -
-
{timeline.length > 0 && ( -
{timeline.map((item, index) => ( -
-
-
-
- - {item.period} - -
- - {`${index < 9 ? '0' : ''}${index + 1}`} - -
- + -
+ ))} -
+ )}
) diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/SectionHeader/SectionHeader.scss b/packages/logos-docusaurus-theme/src/client/components/mdx/SectionHeader/SectionHeader.scss new file mode 100644 index 0000000..c477243 --- /dev/null +++ b/packages/logos-docusaurus-theme/src/client/components/mdx/SectionHeader/SectionHeader.scss @@ -0,0 +1,26 @@ +@use '../../../css/utils'; +@use '../../../css/lsd'; + +.mdx-section-header { + width: 100%; + padding-top: 24px; + border-top: 1px solid rgb(var(--lsd-border-primary)); + + display: flex; + flex-direction: row; + gap: 1rem; + + > * { + flex-basis: 50%; + } +} + +@include utils.responsive('lg', 'down') { + .mdx-section-header { + flex-direction: column; + + &__title { + @include lsd.typography('body1'); + } + } +} diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/SectionHeader/SectionHeader.tsx b/packages/logos-docusaurus-theme/src/client/components/mdx/SectionHeader/SectionHeader.tsx new file mode 100644 index 0000000..93a04b8 --- /dev/null +++ b/packages/logos-docusaurus-theme/src/client/components/mdx/SectionHeader/SectionHeader.tsx @@ -0,0 +1,40 @@ +import { Typography } from '@acid-info/lsd-react' +import clsx from 'clsx' +import React from 'react' +import { Box, BoxProps } from '..' +import './SectionHeader.scss' + +export type SectionHeaderProps = Omit & { + title?: React.ReactNode + description?: React.ReactNode +} + +export const SectionHeader: React.FC = ({ + title, + description, + className, + children, + ...props +}) => { + return ( + + + {title} + + + {description && ( + + {description} + + )} + + ) +} diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/SectionHeader/index.ts b/packages/logos-docusaurus-theme/src/client/components/mdx/SectionHeader/index.ts new file mode 100644 index 0000000..5c4aefd --- /dev/null +++ b/packages/logos-docusaurus-theme/src/client/components/mdx/SectionHeader/index.ts @@ -0,0 +1 @@ +export * from './SectionHeader' diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/TimelineItem/TimelineItem.scss b/packages/logos-docusaurus-theme/src/client/components/mdx/TimelineItem/TimelineItem.scss new file mode 100644 index 0000000..a323a79 --- /dev/null +++ b/packages/logos-docusaurus-theme/src/client/components/mdx/TimelineItem/TimelineItem.scss @@ -0,0 +1,70 @@ +@use '../../../css/utils'; +@use '../../../css/lsd'; + +.mdx-timeline-item { + width: 236px; + height: 100%; + gap: 1rem; + flex: 0 0 auto; + display: flex; + flex-direction: column; + padding-bottom: 23px; + border-bottom: 1px solid rgb(var(--lsd-border-primary)); + scroll-snap-align: start !important; +} + +.mdx-timeline-item__header { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 1rem; +} + +.mdx-timeline-item__period-container { + width: 100%; + position: relative; +} + +.mdx-timeline-item__border { + top: 0; + left: 0; + width: calc(100% + 1rem); + height: 50%; + position: absolute; + border-bottom: 1px solid rgb(var(--lsd-border-primary)); + z-index: -1; +} + +.mdx-timeline-item--border-dashed { + .mdx-timeline-item__border { + border-bottom-style: dashed; + } +} + +.mdx-timeline-item__period { + padding: 3px 12px; + display: inline-block; + border-radius: 10rem; + color: rgb(var(--lsd-text-secondary)) !important; + background-color: rgb(var(--lsd-surface-secondary)); +} + +.mdx-timeline-item__item:last-child { + .mdx-timeline-item__border { + display: none; + } +} + +.mdx-timeline-item--top-aligned { +} + +.mdx-timeline-item--bottom-aligned { + min-height: 308px; + justify-content: space-between; +} + +@include utils.responsive('lg', 'down') { + .mdx-timeline-item { + width: 204px; + } +} diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/TimelineItem/TimelineItem.tsx b/packages/logos-docusaurus-theme/src/client/components/mdx/TimelineItem/TimelineItem.tsx new file mode 100644 index 0000000..4d46e81 --- /dev/null +++ b/packages/logos-docusaurus-theme/src/client/components/mdx/TimelineItem/TimelineItem.tsx @@ -0,0 +1,69 @@ +import { Typography } from '@acid-info/lsd-react' +import clsx from 'clsx' +import React from 'react' +import './TimelineItem.scss' + +export type TimelineItemProps = Omit< + React.HTMLAttributes, + 'title' +> & { + index: React.ReactNode + alignment?: 'top' | 'bottom' + period: React.ReactNode + description: React.ReactNode + borderStyle?: 'solid' | 'dashed' | 'none' +} + +export const TimelineItem: React.FC = ({ + index, + period, + description, + alignment = 'top', + borderStyle, + className, + children, + ...props +}) => { + return ( +
+
+
+ {borderStyle !== 'none' && ( +
+ )} + + {period} + +
+ + {typeof index === 'number' + ? `${index < 9 ? '0' : ''}${index + 1}` + : index} + +
+ + {description} + +
+ ) +} diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/TimelineItem/index.ts b/packages/logos-docusaurus-theme/src/client/components/mdx/TimelineItem/index.ts new file mode 100644 index 0000000..a2adbd3 --- /dev/null +++ b/packages/logos-docusaurus-theme/src/client/components/mdx/TimelineItem/index.ts @@ -0,0 +1 @@ +export * from './TimelineItem' 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 05ea378..db9e93f 100644 --- a/packages/logos-docusaurus-theme/src/client/components/mdx/index.ts +++ b/packages/logos-docusaurus-theme/src/client/components/mdx/index.ts @@ -1,7 +1,6 @@ export * from './Box' export * from './CallToActionButton' export * from './CallToActionSection' -export * from './Community' export * from './DocMetadata' export * from './FeatureList' export * from './Grid' @@ -15,8 +14,9 @@ export * from './HeroTitle' export * from './HeroVideo' export * from './PoweredBy' export * from './ProfileCard' -export * from './ProfileCards' export * from './Roadmap' export * from './ScrollToBottom' +export * from './SectionHeader' export * from './Showcase' export * from './SocialCard' +export * from './TimelineItem'