diff --git a/landing/competitor-feature.css b/landing/competitor-feature.css --- a/landing/competitor-feature.css +++ b/landing/competitor-feature.css @@ -43,3 +43,8 @@ height: 80px; margin-top: 8px; } + +.descriptionTextMutli { + color: var(--white-80); + margin-top: 16px; +} diff --git a/landing/competitor-feature.react.js b/landing/competitor-feature.react.js --- a/landing/competitor-feature.react.js +++ b/landing/competitor-feature.react.js @@ -11,12 +11,35 @@ import CompetitorLogo from './competitor-logo.react.js'; import typography from './typography.css'; +function useDescriptionContent( + description: string | $ReadOnlyArray, + descriptionClassName, + descriptionMultiClassName, +) { + return React.useMemo(() => { + if (typeof description === 'string') { + return

{description}

; + } + const paragraphs = description.map((paragraph, index) => { + const className = + index > 0 ? descriptionMultiClassName : descriptionClassName; + + return ( +

+ {paragraph} +

+ ); + }); + return <>{paragraphs}; + }, [description, descriptionClassName, descriptionMultiClassName]); +} + type Props = { +competitorID: Competitors, +title: string, +comingSoon: boolean, - +competitorDescription: string, - +commDescription: string, + +competitorDescription: string | $ReadOnlyArray, + +commDescription: string | $ReadOnlyArray, }; function CompetitorFeature(props: Props): React.Node { @@ -37,6 +60,10 @@ typography.paragraph1, css.descriptionText, ]); + const descriptionMultiClassName = classNames([ + typography.paragraph1, + css.descriptionTextMutli, + ]); let comingSoonBadge; if (comingSoon) { @@ -52,6 +79,17 @@ ); } + const competitorInfo = useDescriptionContent( + competitorDescription, + descriptionClassName, + descriptionMultiClassName, + ); + const commInfo = useDescriptionContent( + commDescription, + descriptionClassName, + descriptionMultiClassName, + ); + return (
@@ -59,10 +97,10 @@ {comingSoonBadge}
-

{competitorDescription}

+ {competitorInfo}
-

{commDescription}

+ {commInfo}
); }