From 420ca4ea4f0844f7b57a4572cecdae08776cb90c Mon Sep 17 00:00:00 2001 From: jinhojang6 Date: Thu, 15 Feb 2024 01:28:58 +0900 Subject: [PATCH] feat: refactoring components for new design --- .../docusaurus-playground/src/pages/index.mdx | 461 +++++++++++------- .../CallToActionSection.scss | 55 ++- .../CallToActionSection.tsx | 13 +- .../components/mdx/EventCTASection/index.ts | 1 - .../mdx/FeatureList/FeatureList.scss | 28 +- .../mdx/FeatureList/FeatureList.tsx | 62 ++- .../src/client/components/mdx/Hero/Hero.scss | 12 + .../src/client/components/mdx/Hero/Hero.tsx | 9 +- .../mdx/HeroDescription/HeroDescription.scss | 5 +- .../components/mdx/HeroInfo/HeroInfo.scss | 2 +- .../components/mdx/HeroInfo/HeroInfo.tsx | 4 +- .../components/mdx/HeroTitle/HeroTitle.scss | 4 +- .../InputCTASection.scss} | 6 +- .../InputCTASection.tsx} | 24 +- .../components/mdx/InputCTASection/index.ts | 1 + .../mdx/LogoCarousel/LogoCarousel.scss | 4 + .../mdx/LogoCarousel/LogoCarousel.tsx | 9 +- .../mdx/ProfileCard/ProfileCard.scss | 13 +- .../mdx/ProfileCard/ProfileCard.tsx | 55 ++- .../components/mdx/Roadmap/Roadmap.scss | 2 +- .../client/components/mdx/Roadmap/Roadmap.tsx | 3 + .../mdx/SectionHeader/SectionHeader.scss | 4 + .../mdx/SectionHeader/SectionHeader.tsx | 6 +- .../mdx/ShowcaseCard/ShowcaseCard.scss | 16 +- .../mdx/ShowcaseCard/ShowcaseCard.tsx | 18 +- .../src/client/components/mdx/index.ts | 2 +- 26 files changed, 525 insertions(+), 294 deletions(-) delete mode 100644 packages/logos-docusaurus-theme/src/client/components/mdx/EventCTASection/index.ts rename packages/logos-docusaurus-theme/src/client/components/mdx/{EventCTASection/EventCTASection.scss => InputCTASection/InputCTASection.scss} (94%) rename packages/logos-docusaurus-theme/src/client/components/mdx/{EventCTASection/EventCTASection.tsx => InputCTASection/InputCTASection.tsx} (88%) create mode 100644 packages/logos-docusaurus-theme/src/client/components/mdx/InputCTASection/index.ts diff --git a/packages/docusaurus-playground/src/pages/index.mdx b/packages/docusaurus-playground/src/pages/index.mdx index e4106f5..813c9a7 100644 --- a/packages/docusaurus-playground/src/pages/index.mdx +++ b/packages/docusaurus-playground/src/pages/index.mdx @@ -12,10 +12,9 @@ import { Box, Grid, ProfileCard, - ProfileCards, Roadmap, SectionHeader, - TimelineItem, + InputCTASection, ShowcaseCard, JobsPerDepartment, GithubChallenges, @@ -24,62 +23,26 @@ import { import * as jobData from '/generated/jobs.json' import * as challengesData from '/generated/challenges.json' - - - {'LIGHT AND PERFORMANT CLIENTS, FOR THE ETHEREUM NETWORK'} - - - { - 'Run Nimbus on lightweight devices or premium servers with equal ease and peace of mind. Trusted by solo stakers and enterprise node operators alike.' - } - - - - Learn more - - - + + + + Light and High Performing Ethereum Clients + + + Run Nimbus on lightweight devices or enterprise-grade servers with equal + ease and peace of mind. Trusted by solo stakers and node operators alike. + + + + Get Involved + + + + - - - read more - - - - - - - Read mroe - - - + + + + + + + Follow the detailed
step-by-step guide here } + description={<>Run Nimbus in one of three setups} border={false} list={[ { @@ -139,7 +159,7 @@ import * as challengesData from '/generated/challenges.json' 'Use Nimbus Beacon Node with an alternative validator client.', }, { - title: 'Beacon setup', + title: 'Validator setup', description: 'Use Nimbus Validator Client with an alternative Beacon Node', }, @@ -155,7 +175,7 @@ import * as challengesData from '/generated/challenges.json' columns={1} title="User Endorsements" border={false} - align="right" + align="left" description="Nimbus is trusted by Etherem validators diverse in both size and operating requirements. But don't just take our word for it." href="https://nimbus.team" label="Get Nimbus" @@ -168,6 +188,7 @@ import * as challengesData from '/generated/challenges.json' > @@ -184,6 +207,8 @@ import * as challengesData from '/generated/challenges.json' @@ -191,6 +216,8 @@ import * as challengesData from '/generated/challenges.json' @@ -200,69 +227,130 @@ import * as challengesData from '/generated/challenges.json' - + + + + + + + + - - + + - - - - Read more - - + + + Nimbus is part of the Logos Network State Ecosystem. Logos is a + grassroots movement to provide trust-minimised, corruption-resistant + governing services and social institutions to peaceful people worldwide. +
+
+ Learn more about our ambitious vision. + + } + label="Explore Logos" + href="https://logos.co/" + target="_blank" + /> - - + + + + + + + + + diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/CallToActionSection/CallToActionSection.scss b/packages/logos-docusaurus-theme/src/client/components/mdx/CallToActionSection/CallToActionSection.scss index eed72c1..87dda46 100644 --- a/packages/logos-docusaurus-theme/src/client/components/mdx/CallToActionSection/CallToActionSection.scss +++ b/packages/logos-docusaurus-theme/src/client/components/mdx/CallToActionSection/CallToActionSection.scss @@ -44,11 +44,19 @@ } .mdx-cta-section--no-border { - border-top: none !important; + border: none !important; + + > * { + border: none !important; + } +} + +.mdx-cta-section__description { + margin-top: 1rem; } .mdx-cta-section--title-only { - .mdx-cta-section__title { + .mdx-cta-section__description { @include lsd.typography('h5', false); font-weight: 300; @@ -57,7 +65,7 @@ } .mdx-cta-section--title-button { - .mdx-cta-section__title { + .mdx-cta-section__description { @include lsd.typography('display4', false); font-weight: 300; @@ -65,7 +73,7 @@ } @include utils.responsive('lg', 'down') { - .mdx-cta-section__title { + .mdx-cta-section__description { @include lsd.typography('h4', false); } } @@ -79,11 +87,11 @@ } .mdx-cta-section__title { - @include lsd.typography('h5', false); + @include lsd.typography('h3', false); } .mdx-cta-section__description { - @include lsd.typography('h3', false); + @include lsd.typography('h5', false); } .mdx-cta-section__link { @@ -95,7 +103,7 @@ display: block; } - .mdx-cta-section__description { + .mdx-cta-section__title { margin-top: 1.5rem; } } @@ -103,20 +111,20 @@ .mdx-cta-section--simple { .mdx-cta-section__title { - @include lsd.typography('h5', false); - } - - .mdx-cta-section__description { @include lsd.typography('h2', false); - margin-top: 2rem; + margin-top: 1.5rem; } @include utils.responsive('lg', 'down') { - .mdx-cta-section__description { + .mdx-cta-section__title { margin-top: 1.5rem; } } + + .mdx-cta-section__description { + @include lsd.typography('h5', false); + } } .mdx-cta-section--list { @@ -129,13 +137,13 @@ } .mdx-cta-section__title { - @include lsd.typography('h5', false); + @include lsd.typography('h2', false); + + margin-top: 1.5rem; } .mdx-cta-section__description { - @include lsd.typography('h1', false); - - margin-top: 2rem; + @include lsd.typography('h5', false); } .mdx-cta-section__list { @@ -160,10 +168,13 @@ > .mdx-cta-section__item-title { margin-top: 1.5rem; padding: 3px 11px; - display: inline-block; + display: flex; + align-items: center; + width: fit-content; + gap: 12px; border-radius: 1rem; - color: rgb(var(--lsd-text-secondary)); - background-color: rgb(var(--lsd-surface-secondary)); + color: rgb(var(--lsd-text-primary)); + border: 1px solid rgb(var(--lsd-border-primary)); } & > .mdx-cta-section__item-description { @@ -201,10 +212,10 @@ @include utils.responsive('lg', 'down') { .mdx-cta-section__title { - @include lsd.typography('subtitle2', true); + @include lsd.typography('h4', true); } .mdx-cta-section__description { - @include lsd.typography('h4', true); + @include lsd.typography('subtitle2', true); } } diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/CallToActionSection/CallToActionSection.tsx b/packages/logos-docusaurus-theme/src/client/components/mdx/CallToActionSection/CallToActionSection.tsx index c3a7be8..047bb42 100644 --- a/packages/logos-docusaurus-theme/src/client/components/mdx/CallToActionSection/CallToActionSection.tsx +++ b/packages/logos-docusaurus-theme/src/client/components/mdx/CallToActionSection/CallToActionSection.tsx @@ -3,6 +3,7 @@ import clsx from 'clsx' import React from 'react' import { CallToActionButton } from '../index' import './CallToActionSection.scss' +import { IconExternalLink } from '@logos-theme/components/Icon' /** * Props for the CallToActionSection component @@ -178,19 +179,25 @@ export const CallToActionSection: React.FC = ({ )} {list.length > 0 && ( -
+
{list.map((option, index) => { const content = (
{option.title} + diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/EventCTASection/index.ts b/packages/logos-docusaurus-theme/src/client/components/mdx/EventCTASection/index.ts deleted file mode 100644 index afeaecf..0000000 --- a/packages/logos-docusaurus-theme/src/client/components/mdx/EventCTASection/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './EventCTASection' diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/FeatureList/FeatureList.scss b/packages/logos-docusaurus-theme/src/client/components/mdx/FeatureList/FeatureList.scss index f5e2475..67fc7a8 100644 --- a/packages/logos-docusaurus-theme/src/client/components/mdx/FeatureList/FeatureList.scss +++ b/packages/logos-docusaurus-theme/src/client/components/mdx/FeatureList/FeatureList.scss @@ -27,16 +27,20 @@ .mdx-feature-list--top-aligned { @include utils.responsive('lg', 'up') { .mdx-feature-list__feature-description { - margin-top: 136px; + margin-top: 40px; } } } +.mdx-feature-list--border-none { + border: none !important; +} + .mdx-feature-list__title { padding: 24px 0; } -.mdx-feature-list__feature-index { +.mdx-feature-list__feature-index--circle { background: rgb(var(--lsd-surface-secondary)); padding: 0.5rem; border-radius: 100%; @@ -48,6 +52,18 @@ justify-content: center; } +.mdx-feature-list__feature-index--number { + background: transparent; + font-size: 28px !important; + line-height: 36px !important; + opacity: 0.3; + width: unset; + height: unset; + padding: unset; + display: block; + color: rgb(var(--lsd-text-primary)) !important; +} + .mdx-feature-list__list { display: grid; grid-template-columns: repeat(2, 1fr); @@ -63,7 +79,7 @@ } .mdx-feature-list__feature-title { - margin-top: 1rem; + margin-top: 0.5rem; } .mdx-feature-list__feature-description { @@ -86,6 +102,10 @@ } } +.mdx-feature-list__feature-border--none { + width: 0 !important; +} + @include utils.responsive('lg', 'up') { .mdx-feature-list__feature { padding: 1rem; @@ -143,7 +163,7 @@ padding: 1.5rem 0; border-top: 1px solid rgb(var(--lsd-border-primary)); - .mdx-feature-list__feature-index { + .mdx-feature-list__feature-index--circle { @include lsd.typography('subtitle2', false); width: 1.625rem; height: 1.625rem; diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/FeatureList/FeatureList.tsx b/packages/logos-docusaurus-theme/src/client/components/mdx/FeatureList/FeatureList.tsx index 4f33093..7800794 100644 --- a/packages/logos-docusaurus-theme/src/client/components/mdx/FeatureList/FeatureList.tsx +++ b/packages/logos-docusaurus-theme/src/client/components/mdx/FeatureList/FeatureList.tsx @@ -29,6 +29,20 @@ export type FeatureListProps = Omit< * The position of the call to action buttons. */ ctaPosition?: 'top' | 'bottom' + /** + * The style of the index of the feature list. + */ + indexStyle?: 'circle' | 'number' + /** + * The border style of the feature list. + */ + borderStyle?: 'none' | 'solid' +} + +function pad(num, size) { + num = num.toString() + while (num.length < size) num = '0' + num + return num } /** @@ -59,6 +73,8 @@ export const FeatureList: React.FC = ({ features = [], className, ctaPosition = 'bottom', + indexStyle = 'circle', + borderStyle = 'solid', children, ...props }) => { @@ -69,13 +85,14 @@ export const FeatureList: React.FC = ({ 'mdx-feature-list', `mdx-feature-list--${alignment}-aligned`, `mdx-feature-list--cta-${ctaPosition}`, + borderStyle === 'none' && 'mdx-feature-list--border-none', )} {...props} >
{title} @@ -86,15 +103,32 @@ export const FeatureList: React.FC = ({
{features.map((feature, index) => ( -
+
- - {index + 1} - + {indexStyle === 'circle' ? ( + + {index + 1} + + ) : ( + + [{pad(index + 1, 2)}] + + )} + = ({ {feature.description}
-
+
))}
diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/Hero/Hero.scss b/packages/logos-docusaurus-theme/src/client/components/mdx/Hero/Hero.scss index 29b2954..9733386 100644 --- a/packages/logos-docusaurus-theme/src/client/components/mdx/Hero/Hero.scss +++ b/packages/logos-docusaurus-theme/src/client/components/mdx/Hero/Hero.scss @@ -13,3 +13,15 @@ //padding-bottom: 2rem; //border-top: none; } + +.mdx-hero--top { + justify-content: flex-start; +} + +.mdx-hero--center { + justify-content: center; +} + +.mdx-hero--bottom { + justify-content: flex-end; +} diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/Hero/Hero.tsx b/packages/logos-docusaurus-theme/src/client/components/mdx/Hero/Hero.tsx index 826d5fc..55eaaf7 100644 --- a/packages/logos-docusaurus-theme/src/client/components/mdx/Hero/Hero.tsx +++ b/packages/logos-docusaurus-theme/src/client/components/mdx/Hero/Hero.tsx @@ -5,6 +5,7 @@ import './Hero.scss' export type HeroProps = Omit, 'title'> & { size?: 'large' | 'medium' | 'small' + verticalAlign?: 'top' | 'center' | 'bottom' } /** @@ -51,12 +52,18 @@ export const Hero: React.FC = ({ size = 'medium', className, children, + verticalAlign = 'top', ...props }) => { return (
{children} diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/HeroDescription/HeroDescription.scss b/packages/logos-docusaurus-theme/src/client/components/mdx/HeroDescription/HeroDescription.scss index 187ffc0..1e3b8e6 100644 --- a/packages/logos-docusaurus-theme/src/client/components/mdx/HeroDescription/HeroDescription.scss +++ b/packages/logos-docusaurus-theme/src/client/components/mdx/HeroDescription/HeroDescription.scss @@ -6,8 +6,11 @@ position: relative; z-index: -2; text-shadow: 1px 1px 6px rgba(var(--lsd-surface-primary), 1); - max-width: 1260px; + max-width: 528px; margin-top: 18px; + + font-size: 18px !important; + line-height: 24px !important; } .mdx-hero-description--small { diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/HeroInfo/HeroInfo.scss b/packages/logos-docusaurus-theme/src/client/components/mdx/HeroInfo/HeroInfo.scss index 0db0acf..251fb25 100644 --- a/packages/logos-docusaurus-theme/src/client/components/mdx/HeroInfo/HeroInfo.scss +++ b/packages/logos-docusaurus-theme/src/client/components/mdx/HeroInfo/HeroInfo.scss @@ -7,8 +7,8 @@ flex-direction: column; justify-content: end; - border-bottom: 1px solid rgb(var(--lsd-surface-secondary)); transition: margin-bottom 0.05s ease-in-out; + max-width: 596px; } .mdx-hero-info--large { diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/HeroInfo/HeroInfo.tsx b/packages/logos-docusaurus-theme/src/client/components/mdx/HeroInfo/HeroInfo.tsx index 635af4e..ad3fa14 100644 --- a/packages/logos-docusaurus-theme/src/client/components/mdx/HeroInfo/HeroInfo.tsx +++ b/packages/logos-docusaurus-theme/src/client/components/mdx/HeroInfo/HeroInfo.tsx @@ -9,11 +9,13 @@ export type HeroInfoProps = PropsWithChildren< React.HTMLAttributes > & { size?: 'medium' | 'large' | 'small' + hideScrollToBottom?: boolean } export const HeroInfo: React.FC = ({ size: sizeProp, className, + hideScrollToBottom = false, children, ...props }) => { @@ -29,7 +31,7 @@ export const HeroInfo: React.FC = ({ > {children}
- {hydrated && } + {hydrated && !hideScrollToBottom && } ) } diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/HeroTitle/HeroTitle.scss b/packages/logos-docusaurus-theme/src/client/components/mdx/HeroTitle/HeroTitle.scss index 478d652..01ec321 100644 --- a/packages/logos-docusaurus-theme/src/client/components/mdx/HeroTitle/HeroTitle.scss +++ b/packages/logos-docusaurus-theme/src/client/components/mdx/HeroTitle/HeroTitle.scss @@ -2,8 +2,8 @@ @use '../../../css/lsd'; .mdx-hero-title { - font-size: 70px !important; - line-height: 100% !important; + font-size: 48px !important; + line-height: 56px !important; } .mdx-hero-title--large { diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/EventCTASection/EventCTASection.scss b/packages/logos-docusaurus-theme/src/client/components/mdx/InputCTASection/InputCTASection.scss similarity index 94% rename from packages/logos-docusaurus-theme/src/client/components/mdx/EventCTASection/EventCTASection.scss rename to packages/logos-docusaurus-theme/src/client/components/mdx/InputCTASection/InputCTASection.scss index e9013b9..ee9fe81 100644 --- a/packages/logos-docusaurus-theme/src/client/components/mdx/EventCTASection/EventCTASection.scss +++ b/packages/logos-docusaurus-theme/src/client/components/mdx/InputCTASection/InputCTASection.scss @@ -9,10 +9,10 @@ margin-top: 0px !important; margin-bottom: 16px; } +} - h3 { - margin-top: 24px !important; - } +.mdx-event-cta-section__title { + margin-bottom: 24px !important; } .mdx-event-cta-section__cta { diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/EventCTASection/EventCTASection.tsx b/packages/logos-docusaurus-theme/src/client/components/mdx/InputCTASection/InputCTASection.tsx similarity index 88% rename from packages/logos-docusaurus-theme/src/client/components/mdx/EventCTASection/EventCTASection.tsx rename to packages/logos-docusaurus-theme/src/client/components/mdx/InputCTASection/InputCTASection.tsx index 1d4b5ab..b089e60 100644 --- a/packages/logos-docusaurus-theme/src/client/components/mdx/EventCTASection/EventCTASection.tsx +++ b/packages/logos-docusaurus-theme/src/client/components/mdx/InputCTASection/InputCTASection.tsx @@ -1,19 +1,19 @@ import React from 'react' -import './EventCTASection.scss' +import './InputCTASection.scss' import { Button, TextField, Typography } from '@acid-info/lsd-react' import Link, { Props } from '@docusaurus/Link' -export type EventCTASectionProps = { +export type InputCTASectionProps = { title: string description: string label: string link?: string - linkProps: Props + linkProps?: Props formInput?: any[] formListId?: number } -export const EventCTASection: React.FC = ({ +export const InputCTASection: React.FC = ({ title, description, label, @@ -66,13 +66,15 @@ export const EventCTASection: React.FC = ({ return (
- - {title} - + {title && ( + + {title} + + )} = ({ if (typeof window !== 'undefined' && hydrated && !containerRef.current) { containerRef.current = ref.current?.querySelector('.mdx-grid__content') ?? null - - console.log(containerRef.current, ref.current) } return (
- - - + +
+ +
= ({ src={imgSrc} /> )} - - {name} - -
- -
- {githubUsername && githubLink && ( - + - - - )} + {name} + +
+ {githubUsername && githubLink && ( + + + + )} - {discordUsername && discordLink && ( - - - - )} + {discordUsername && discordLink && ( + + + + )} +
+
) 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 5d4bf6b..f781b37 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 @@ -6,7 +6,7 @@ } .mdx-roadmap__timeline { - margin-top: 6.25rem; + margin-top: 64px; .mdx-grid-item:last-child { .mdx-timeline-item__border { 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 949e76c..2a43b9b 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 @@ -11,12 +11,14 @@ export type RoadmapProps = Omit< title: React.ReactNode description?: React.ReactNode timeline?: Partial[] + noBorder?: boolean } export const Roadmap: React.FC = ({ title, description, timeline = [], + noBorder = false, className, children, ...props @@ -75,6 +77,7 @@ export const Roadmap: React.FC = ({ className="mdx-roadmap__header" title={title} description={description} + noBorder={noBorder} > {children} 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 index 1eca637..35850e1 100644 --- a/packages/logos-docusaurus-theme/src/client/components/mdx/SectionHeader/SectionHeader.scss +++ b/packages/logos-docusaurus-theme/src/client/components/mdx/SectionHeader/SectionHeader.scss @@ -27,6 +27,10 @@ gap: 2rem; } +.mdx-section-header--no-border { + border-top: none; +} + @include utils.responsive('lg', 'down') { .mdx-section-header { flex-direction: column; 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 index da15a1e..49d7c8b 100644 --- a/packages/logos-docusaurus-theme/src/client/components/mdx/SectionHeader/SectionHeader.tsx +++ b/packages/logos-docusaurus-theme/src/client/components/mdx/SectionHeader/SectionHeader.tsx @@ -7,11 +7,12 @@ import './SectionHeader.scss' export type SectionHeaderProps = Omit & { title?: React.ReactNode description?: React.ReactNode + noBorder?: boolean } export const SectionHeader: React.FC< React.PropsWithChildren -> = ({ title, description, className, children, ...props }) => { +> = ({ title, description, className, noBorder, children, ...props }) => { const withDescription = !!description return ( @@ -20,13 +21,14 @@ export const SectionHeader: React.FC< className, 'mdx-section-header', withDescription && 'mdx-section-header--with-description', + noBorder && 'mdx-section-header--no-border', )} {...props} > {title} {!withDescription && children && ( diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/ShowcaseCard/ShowcaseCard.scss b/packages/logos-docusaurus-theme/src/client/components/mdx/ShowcaseCard/ShowcaseCard.scss index 4775fdc..326f7e6 100644 --- a/packages/logos-docusaurus-theme/src/client/components/mdx/ShowcaseCard/ShowcaseCard.scss +++ b/packages/logos-docusaurus-theme/src/client/components/mdx/ShowcaseCard/ShowcaseCard.scss @@ -9,7 +9,7 @@ padding-top: 1.5rem; display: flex; flex-direction: column; - gap: 1.5rem; + gap: 1rem; } .mdx-showcase-card__logo { @@ -33,7 +33,7 @@ } .mdx-showcase-card__description { - margin-top: -0.125rem; + margin-top: 1.5rem; padding-top: 0.5rem; } @@ -56,6 +56,18 @@ } } +.mdx-showcase-card__cta { + display: flex; + align-items: center; + gap: 6px; + font-size: 14px; + line-height: 20px; + + svg { + transform: rotate(-90deg); + } +} + @include utils.responsive('lg', 'down') { .mdx-showcase { grid-template-columns: repeat(2, 1fr); diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/ShowcaseCard/ShowcaseCard.tsx b/packages/logos-docusaurus-theme/src/client/components/mdx/ShowcaseCard/ShowcaseCard.tsx index 8ec7f02..66e9718 100644 --- a/packages/logos-docusaurus-theme/src/client/components/mdx/ShowcaseCard/ShowcaseCard.tsx +++ b/packages/logos-docusaurus-theme/src/client/components/mdx/ShowcaseCard/ShowcaseCard.tsx @@ -1,4 +1,4 @@ -import { Typography } from '@acid-info/lsd-react' +import { ChevronDownIcon, Typography } from '@acid-info/lsd-react' import ThemedImage from '@theme/ThemedImage' import clsx from 'clsx' import React from 'react' @@ -15,6 +15,11 @@ export type ShowcaseCardProps = Omit< description: React.ReactNode size?: 'small' | 'large' borderStyle?: 'none' | 'solid' + cta?: { + label: string + href: string + target: '_self' | '_blank' + } } export const ShowcaseCard: React.FC = ({ @@ -26,6 +31,7 @@ export const ShowcaseCard: React.FC = ({ className, size = 'large', borderStyle = 'solid', + cta, children, ...props }) => { @@ -77,6 +83,16 @@ export const ShowcaseCard: React.FC = ({ {description} )} + {cta && ( + + {cta?.label} + + + )}
) 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 b65712d..a3eca96 100644 --- a/packages/logos-docusaurus-theme/src/client/components/mdx/index.ts +++ b/packages/logos-docusaurus-theme/src/client/components/mdx/index.ts @@ -37,5 +37,5 @@ export * from './EventAbout' export * from './EventProfile' export * from './EventProfileList' export * from './EventCTA' -export * from './EventCTASection' +export * from './InputCTASection' export * from './EventHeader'