diff --git a/src/components/EtlToolsXvsYPage/Comparison/RelatedComparisonLinks/index.tsx b/src/components/EtlToolsXvsYPage/Comparison/RelatedComparisonLinks/index.tsx new file mode 100644 index 00000000..145d25da --- /dev/null +++ b/src/components/EtlToolsXvsYPage/Comparison/RelatedComparisonLinks/index.tsx @@ -0,0 +1,38 @@ +import React from 'react'; +import { Link } from 'gatsby'; +import { getComparisonSlug, Vendor } from '../../../../../shared'; +import { container } from './styles.module.less'; + +interface RelatedComparisonLinksProps { + vendors: Partial[]; + excludeVendorIds: string[]; + baseVendor: Vendor; +} + +const RelatedComparisonLinks = ({ + vendors, + excludeVendorIds, + baseVendor, +}: RelatedComparisonLinksProps) => { + return ( +
+ {vendors + .filter( + (vendor) => + vendor.id && !excludeVendorIds.includes(vendor.id) + ) + .map((vendor) => + vendor.slugKey ? ( + + {baseVendor.name} vs {vendor.name} + + ) : null + )} +
+ ); +}; + +export default RelatedComparisonLinks; diff --git a/src/components/EtlToolsXvsYPage/Comparison/RelatedComparisonLinks/styles.module.less b/src/components/EtlToolsXvsYPage/Comparison/RelatedComparisonLinks/styles.module.less new file mode 100644 index 00000000..de0f832a --- /dev/null +++ b/src/components/EtlToolsXvsYPage/Comparison/RelatedComparisonLinks/styles.module.less @@ -0,0 +1,19 @@ +.container { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); + margin-top: 20px; + row-gap: 8px; + column-gap: 24px; + + a { + color: var(--blue); + font-weight: 500; + width: fit-content; + + &:hover { + color: var(--blue); + text-underline-offset: 4px; + text-decoration: underline; + } + } +} diff --git a/src/components/EtlToolsXvsYPage/Comparison/index.tsx b/src/components/EtlToolsXvsYPage/Comparison/index.tsx index a84423f7..8bde87ee 100644 --- a/src/components/EtlToolsXvsYPage/Comparison/index.tsx +++ b/src/components/EtlToolsXvsYPage/Comparison/index.tsx @@ -18,29 +18,49 @@ import Support from './Support'; import Cost from './Cost'; import VendorAvatar from './VendorAvatar'; import IntroductoryDetails from './IntroductoryDetails'; +import RelatedComparisonLinks from './RelatedComparisonLinks'; interface SectionTwoProps { xVendor: Vendor; yVendor: Vendor; estuaryVendor: Vendor; + allVendors: Partial[]; } -const articleBody = { +const generateVendorRelatedComparisonsObject = ( + vendorKey: string, + vendorName: string +) => ({ + id: `${vendorKey}-related-comparisons`, + heading: `Related comparisons to ${vendorName}`, +}); + +const articleBody = ( + xVendorName: string, + yVendorName: string, + estuaryVendorName: string | null +) => ({ intro: { id: 'intro', heading: 'Introduction', }, comparisonMatrix: { id: 'comparison-matrix', - heading: 'Comparison Matrix', + heading: `Comparison Matrix: ${xVendorName} vs ${yVendorName}${estuaryVendorName ? ` vs ${estuaryVendorName}` : ''}`, }, howToChoose: { id: 'how-to-choose', heading: 'How to choose the best option', }, -}; - -const { intro, comparisonMatrix, howToChoose } = articleBody; + xVendorRelatedComparisons: generateVendorRelatedComparisonsObject( + 'x-vendor', + xVendorName + ), + yVendorRelatedComparisons: generateVendorRelatedComparisonsObject( + 'y-vendor', + yVendorName + ), +}); const tableBodyComponents = [ UseCases, @@ -53,11 +73,37 @@ const tableBodyComponents = [ Cost, ]; -const Comparison = ({ xVendor, yVendor, estuaryVendor }: SectionTwoProps) => { +const Comparison = ({ + xVendor, + yVendor, + estuaryVendor, + allVendors, +}: SectionTwoProps) => { const isThreeVendorComparison = useMemo(() => { return ![xVendor.id, yVendor.id].includes(estuaryVendor.id); }, [xVendor.id, yVendor.id, estuaryVendor.id]); + const excludeVendorIds = useMemo( + () => [xVendor.id, yVendor.id], + [xVendor.id, yVendor.id] + ); + + const { + intro, + comparisonMatrix, + howToChoose, + xVendorRelatedComparisons, + yVendorRelatedComparisons, + } = useMemo( + () => + articleBody( + xVendor.name, + yVendor.name, + isThreeVendorComparison ? estuaryVendor.name : null + ), + [xVendor.name, yVendor.name, isThreeVendorComparison, estuaryVendor] + ); + const stickyRef1 = useRef(null); const stickyRef2 = useRef(null); const stickyRef3 = useRef(null); @@ -82,19 +128,37 @@ const Comparison = ({ xVendor, yVendor, estuaryVendor }: SectionTwoProps) => { ], }); - const vendors = [xVendor, yVendor].map(createVendorItem); + const comparedVendors = [xVendor, yVendor].map(createVendorItem); if (isThreeVendorComparison) { - vendors.unshift(createVendorItem(estuaryVendor)); + comparedVendors.unshift(createVendorItem(estuaryVendor)); } return [ { id: intro.id, heading: intro.heading }, { id: comparisonMatrix.id, heading: comparisonMatrix.heading }, - ...vendors, + ...comparedVendors, { id: howToChoose.id, heading: howToChoose.heading }, + { + id: xVendorRelatedComparisons.id, + heading: xVendorRelatedComparisons.heading, + }, + { + id: yVendorRelatedComparisons.id, + heading: yVendorRelatedComparisons.heading, + }, ]; - }, [xVendor, yVendor, estuaryVendor, isThreeVendorComparison]); + }, [ + xVendor, + yVendor, + estuaryVendor, + isThreeVendorComparison, + intro, + comparisonMatrix, + howToChoose, + xVendorRelatedComparisons, + yVendorRelatedComparisons, + ]); useEffect(() => { const handleScroll = () => { @@ -256,6 +320,24 @@ const Comparison = ({ xVendor, yVendor, estuaryVendor }: SectionTwoProps) => { needs, and use this information to a good short-term and long-term solution for you.

+ +

+ {xVendorRelatedComparisons.heading} +

+ + +

+ {yVendorRelatedComparisons.heading} +

+ diff --git a/src/templates/etl-tools/index.tsx b/src/templates/etl-tools/index.tsx index edcd78d1..a74a11a2 100644 --- a/src/templates/etl-tools/index.tsx +++ b/src/templates/etl-tools/index.tsx @@ -33,6 +33,11 @@ const EtlTools = ({ xVendor={xVendor} yVendor={yVendor} estuaryVendor={estuaryVendor} + allVendors={vendors.map((vendor) => ({ + id: vendor.id, + name: vendor.name, + slugKey: vendor.slugKey, + }))} />