diff --git a/landing/competitor-feature.css b/landing/competitor-feature.css index f22ef3b77..f113a2202 100644 --- a/landing/competitor-feature.css +++ b/landing/competitor-feature.css @@ -1,45 +1,50 @@ .container { display: flex; flex-direction: column; flex: 1; } .headingContainer { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; } .headingText { color: var(--white-100); } .comingSoonBadge { background-color: var(--badge); padding: 5px 10px; border-radius: 16px; } .comingSoonText { color: var(--white-100); margin-left: 8px; } .comingSoonIcon { color: var(--coming-soon-icon); } hr { margin: 24px 0; border-radius: 8px; height: 1.5px; background-color: var(--black-80); border: none; } .descriptionText { color: var(--white-80); 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 index 2a7b80550..0adbb5318 100644 --- a/landing/competitor-feature.react.js +++ b/landing/competitor-feature.react.js @@ -1,70 +1,108 @@ // @flow import { faWrench } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import classNames from 'classnames'; import * as React from 'react'; import CommLogo from './assets/comm-logo.react.js'; import type { Competitors } from './competitor-data.js'; import css from './competitor-feature.css'; 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 { const { competitorID, title, comingSoon, competitorDescription, commDescription, } = props; const headingClassName = classNames([typography.heading3, css.headingText]); const comingSoonClassName = classNames([ typography.paragraph3, css.comingSoonText, ]); const descriptionClassName = classNames([ typography.paragraph1, css.descriptionText, ]); + const descriptionMultiClassName = classNames([ + typography.paragraph1, + css.descriptionTextMutli, + ]); let comingSoonBadge; if (comingSoon) { comingSoonBadge = (
Coming Soon
); } + const competitorInfo = useDescriptionContent( + competitorDescription, + descriptionClassName, + descriptionMultiClassName, + ); + const commInfo = useDescriptionContent( + commDescription, + descriptionClassName, + descriptionMultiClassName, + ); + return (

{title}

{comingSoonBadge}
-

{competitorDescription}

+ {competitorInfo}
-

{commDescription}

+ {commInfo}
); } export default CompetitorFeature;