Differential D8038 Diff 29743 landing/competitor-comparison.react.js

Changeset View

Standalone View

landing/competitor-comparison.react.js

// @flow		// @flow

import classNames from 'classnames';		import classNames from 'classnames';
import * as React from 'react';		import * as React from 'react';

		import { useModalContext } from 'lib/components/modal-provider.react.js';

import css from './competitor-comparison.css';		import css from './competitor-comparison.css';
		import {
		competitorData,
		type Competitor,
		type FeatureComparison,
		} from './competitor-data.js';
		import CompetitorFeatureCard from './competitor-feature-card.react.js';
import CompetitorLogo from './competitor-logo.react.js';		import CompetitorLogo from './competitor-logo.react.js';
		import FeatureModal from './feature-modal.react.js';
import typography from './typography.css';		import typography from './typography.css';

const competitors = [		const competitors = [
'signal',		'signal',
'keybase',		'keybase',
'telegram',		'telegram',
'discord',		'discord',
'slack',		'slack',
'matrix',		'matrix',
];		];

function CompetitorComparison(): React.Node {		function CompetitorComparison(): React.Node {
		const { pushModal } = useModalContext();

const [selectedCompetitorID, setSelectedCompetitorID] =		const [selectedCompetitorID, setSelectedCompetitorID] =
React.useState<string>('signal');		React.useState<string>('signal');

		const onFeatureCardClick = React.useCallback(
		(competitor: Competitor, feature: FeatureComparison) => {
		pushModal(<FeatureModal competitor={competitor} feature={feature} />);
		},
		[pushModal],
		);

const competitorSelector = React.useMemo(		const competitorSelector = React.useMemo(
() =>		() =>
competitors.map(competitor => {		competitors.map(competitor => {
const competitorLogoClassName = classNames({		const competitorLogoClassName = classNames({
[css.competitorLogo]: true,		[css.competitorLogo]: true,
[css.activeCompetitorLogo]: selectedCompetitorID === competitor,		[css.activeCompetitorLogo]: selectedCompetitorID === competitor,
});		});
const bumpClassName = classNames({		const bumpClassName = classNames({
Show All 10 Lines	() =>
</div>		</div>
<div className={bumpClassName} />		<div className={bumpClassName} />
</div>		</div>
);		);
}),		}),
[selectedCompetitorID],		[selectedCompetitorID],
);		);

		const featureCards = React.useMemo(() => {
		const selectedCompetitor = competitorData[selectedCompetitorID];

		return selectedCompetitor.featureComparison.map(feature => (
		<CompetitorFeatureCard
		key={`${selectedCompetitor.id}_${feature.title}`}
		competitorID={selectedCompetitor.id}
		title={feature.title}
		comingSoon={feature.comingSoon}
		competitorDescription={feature.competitorDescriptionShort}
		commDescription={feature.commDescriptionShort}
		onClick={() => onFeatureCardClick(selectedCompetitor, feature)}
		/>
		));
		}, [onFeatureCardClick, selectedCompetitorID]);

const headerClassName = classNames([typography.heading1, css.headerText]);		const headerClassName = classNames([typography.heading1, css.headerText]);

return (		return (
<section className={css.competitorComparisonSection}>		<section className={css.competitorComparisonSection}>
<h1 className={headerClassName}>See how Comm is different</h1>		<h1 className={headerClassName}>See how Comm is different</h1>
<div className={css.competitorsContainer}>{competitorSelector}</div>		<div className={css.competitorsContainer}>{competitorSelector}</div>
		<div className={css.featureCardsContainer}>{featureCards}</div>
</section>		</section>
);		);
}		}

export default CompetitorComparison;		export default CompetitorComparison;