Changeset View
Changeset View
Standalone View
Standalone View
landing/competitor-feature.react.js
- This file was copied from landing/competitor-feature-card.react.js.
// @flow | // @flow | ||||
import { faWrench } from '@fortawesome/free-solid-svg-icons'; | import { faWrench } from '@fortawesome/free-solid-svg-icons'; | ||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; | ||||
import classNames from 'classnames'; | import classNames from 'classnames'; | ||||
import * as React from 'react'; | import * as React from 'react'; | ||||
import CommLogo from './assets/comm-logo.react.js'; | import CommLogo from './assets/comm-logo.react.js'; | ||||
import type { Competitors } from './competitor-data.js'; | import type { Competitors } from './competitor-data.js'; | ||||
import css from './competitor-feature-card.css'; | import css from './competitor-feature.css'; | ||||
import CompetitorLogo from './competitor-logo.react.js'; | import CompetitorLogo from './competitor-logo.react.js'; | ||||
import typography from './typography.css'; | import typography from './typography.css'; | ||||
type Props = { | type Props = { | ||||
+competitorID: Competitors, | +competitorID: Competitors, | ||||
+title: string, | +title: string, | ||||
+comingSoon: boolean, | +comingSoon: boolean, | ||||
+competitorDescription: string, | +competitorDescription: string, | ||||
+commDescription: string, | +commDescription: string, | ||||
+onClick: () => mixed, | |||||
}; | }; | ||||
function CompetitorFeatureCard(props: Props): React.Node { | function CompetitorFeature(props: Props): React.Node { | ||||
const { | const { | ||||
competitorID, | competitorID, | ||||
title, | title, | ||||
comingSoon, | comingSoon, | ||||
competitorDescription, | competitorDescription, | ||||
commDescription, | commDescription, | ||||
onClick, | |||||
} = props; | } = props; | ||||
const headingClassName = classNames([typography.heading3, css.headingText]); | const headingClassName = classNames([typography.heading3, css.headingText]); | ||||
const comingSoonClassName = classNames([ | const comingSoonClassName = classNames([ | ||||
typography.paragraph3, | typography.paragraph3, | ||||
css.comingSoonText, | css.comingSoonText, | ||||
]); | ]); | ||||
const descriptionClassName = classNames([ | const descriptionClassName = classNames([ | ||||
typography.paragraph1, | typography.paragraph1, | ||||
css.descriptionText, | css.descriptionText, | ||||
]); | ]); | ||||
const readMoreClassName = classNames([ | |||||
typography.paragraph2, | |||||
css.readMoreText, | |||||
]); | |||||
let comingSoonBadge; | let comingSoonBadge; | ||||
if (comingSoon) { | if (comingSoon) { | ||||
comingSoonBadge = ( | comingSoonBadge = ( | ||||
<div className={css.comingSoonBadge}> | <div className={css.comingSoonBadge}> | ||||
<FontAwesomeIcon | <FontAwesomeIcon | ||||
size="sm" | size="sm" | ||||
className={css.comingSoonIcon} | className={css.comingSoonIcon} | ||||
icon={faWrench} | icon={faWrench} | ||||
/> | /> | ||||
<span className={comingSoonClassName}>Coming Soon</span> | <span className={comingSoonClassName}>Coming Soon</span> | ||||
</div> | </div> | ||||
); | ); | ||||
} | } | ||||
return ( | return ( | ||||
<a className={css.container} onClick={onClick}> | <div className={css.container}> | ||||
<div className={css.headingContainer}> | <div className={css.headingContainer}> | ||||
<p className={headingClassName}>{title}</p> | <p className={headingClassName}>{title}</p> | ||||
{comingSoonBadge} | {comingSoonBadge} | ||||
</div> | </div> | ||||
<CompetitorLogo name={competitorID} size={30} /> | <CompetitorLogo name={competitorID} size={30} /> | ||||
<p className={descriptionClassName}>{competitorDescription}</p> | <p className={descriptionClassName}>{competitorDescription}</p> | ||||
<hr /> | <hr /> | ||||
<CommLogo size={30} /> | <CommLogo size={30} /> | ||||
<p className={descriptionClassName}>{commDescription}</p> | <p className={descriptionClassName}>{commDescription}</p> | ||||
<p className={readMoreClassName}>Read more</p> | </div> | ||||
</a> | |||||
); | ); | ||||
} | } | ||||
export default CompetitorFeatureCard; | export default CompetitorFeature; |