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 @@ -15,8 +15,8 @@ +competitorID: Competitors, +title: string, +comingSoon: boolean, - +competitorDescription: string, - +commDescription: string, + +competitorDescription: string | $ReadOnlyArray, + +commDescription: string | $ReadOnlyArray, }; function CompetitorFeature(props: Props): React.Node { @@ -37,6 +37,10 @@ typography.paragraph1, css.descriptionText, ]); + const descriptionMultiClassName = classNames([ + typography.paragraph1, + css.descriptionTextMutli, + ]); let comingSoonBadge; if (comingSoon) { @@ -52,6 +56,42 @@ ); } + const competitorInfo = React.useMemo(() => { + if (typeof competitorDescription === 'string') { + return

{competitorDescription}

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

+ {paragraph} +

+ ); + }); + return <>{paragraphs}; + } + }, [competitorDescription, descriptionClassName, descriptionMultiClassName]); + + const commInfo = React.useMemo(() => { + if (typeof commDescription === 'string') { + return

{commDescription}

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

+ {paragraph} +

+ ); + }); + return <>{paragraphs}; + } + }, [commDescription, descriptionClassName, descriptionMultiClassName]); + return (
@@ -59,10 +99,10 @@ {comingSoonBadge}
-

{competitorDescription}

+ {competitorInfo}
-

{commDescription}

+ {commInfo}
); }