diff --git a/landing/competitor-feature.react.js b/landing/competitor-feature.react.js index dd04b7265..8ad778243 100644 --- a/landing/competitor-feature.react.js +++ b/landing/competitor-feature.react.js @@ -1,112 +1,112 @@ // @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: string, descriptionMultiClassName: string, ) { 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 | $ReadOnlyArray, +commDescription: string | $ReadOnlyArray, +descriptionTextClassName?: string, }; function CompetitorFeature(props: Props): React.Node { const { competitorID, title, comingSoon, competitorDescription, commDescription, descriptionTextClassName = '', } = props; const headingClassName = classNames([typography.heading3, css.headingText]); const comingSoonClassName = classNames([ typography.paragraph3, css.comingSoonText, ]); const descriptionClassName = classNames([ typography.paragraph1, css.descriptionText, descriptionTextClassName, ]); const descriptionMultiClassName = classNames([ typography.paragraph1, css.descriptionTextMutli, descriptionTextClassName, ]); let comingSoonBadge; if (comingSoon) { comingSoonBadge = (
Coming Soon
); } const competitorInfo = useDescriptionContent( competitorDescription, descriptionClassName, descriptionMultiClassName, ); const commInfo = useDescriptionContent( commDescription, descriptionClassName, descriptionMultiClassName, ); return (

{title}

{comingSoonBadge}
- - {competitorInfo} -
{commInfo} +
+ + {competitorInfo}
); } export default CompetitorFeature;