161 lines
4.4 KiB
TypeScript
161 lines
4.4 KiB
TypeScript
"use client"
|
|
import Image from "next/image"
|
|
|
|
import JsonToHtml from "@/components/JsonToHtml"
|
|
import Link from "@/components/TempDesignSystem/Link"
|
|
|
|
import { ArrowRightIcon, ChevronDownIcon, CompareArrowsIcon } from "../Icons"
|
|
import SectionContainer from "../Section/Container"
|
|
import Button from "../TempDesignSystem/Button"
|
|
import Body from "../TempDesignSystem/Text/Body"
|
|
import Caption from "../TempDesignSystem/Text/Caption"
|
|
import Subtitle from "../TempDesignSystem/Text/Subtitle"
|
|
import Title from "../TempDesignSystem/Text/Title"
|
|
|
|
import styles from "./sasTierComparison.module.css"
|
|
|
|
import type { ReactNode } from "react"
|
|
|
|
import type { SasTierComparison } from "@/types/trpc/routers/contentstack/partner"
|
|
|
|
type TierComparisonProps = {
|
|
title?: string
|
|
preamble?: string
|
|
tierComparison: NonNullable<SasTierComparison>
|
|
}
|
|
|
|
export function SasTierComparison({
|
|
title,
|
|
preamble,
|
|
tierComparison,
|
|
}: TierComparisonProps) {
|
|
return (
|
|
<SectionContainer className={styles.comparisonSection}>
|
|
<div className={styles.header}>
|
|
<Title level="h2">{title}</Title>
|
|
{preamble && <p className={styles.preamble}>{preamble}</p>}
|
|
</div>
|
|
<div>
|
|
<div className={styles.columnHeaders}>
|
|
<Image
|
|
alt="Scandic logo"
|
|
height={46}
|
|
src="/_static/img/scandic-logotype.svg"
|
|
priority
|
|
width={215}
|
|
/>
|
|
<Image
|
|
alt="SAS logo"
|
|
height={46}
|
|
src="/_static/img/sas/sas-logotype.svg"
|
|
priority
|
|
width={215}
|
|
/>
|
|
<ColumnTitle>{tierComparison.scandic_column_title}</ColumnTitle>
|
|
<ColumnTitle>{tierComparison.sas_column_title}</ColumnTitle>
|
|
</div>
|
|
<div className={styles.tierMatchList}>
|
|
{tierComparison.tier_matches.map((tierMatch, i) => (
|
|
<TierDetails key={i} tierMatch={tierMatch}>
|
|
<JsonToHtml
|
|
nodes={tierMatch.content.json?.children}
|
|
embeds={[]}
|
|
className={styles.htmlContent}
|
|
/>
|
|
</TierDetails>
|
|
))}
|
|
</div>
|
|
</div>
|
|
{tierComparison.cta?.href && (
|
|
<Button theme="primaryLight" asChild className={styles.ctaButton}>
|
|
<Link href={tierComparison.cta.href} color="white">
|
|
{tierComparison.cta.title}
|
|
</Link>
|
|
</Button>
|
|
)}
|
|
</SectionContainer>
|
|
)
|
|
}
|
|
|
|
type TierMatch = NonNullable<SasTierComparison>["tier_matches"][number]
|
|
|
|
function TierDetails({
|
|
children,
|
|
tierMatch,
|
|
}: {
|
|
children: React.ReactNode
|
|
tierMatch: TierMatch
|
|
}) {
|
|
return (
|
|
<details className={styles.tierDetails} name="sas-scandic-tier-match">
|
|
<summary className={styles.tierSummary}>
|
|
<div className={styles.tierTitles}>
|
|
<Body className={styles.tierTitle}>
|
|
{tierMatch.scandic_friends_tier_name}
|
|
</Body>
|
|
<div className={styles.comparisonIcon}>
|
|
<CompareArrowsIcon width={16} height={16} />
|
|
</div>
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
alignItems: "center",
|
|
position: "relative",
|
|
}}
|
|
>
|
|
<Body className={styles.tierTitle}>
|
|
{tierMatch.sas_eb_tier_name}
|
|
</Body>
|
|
<div className={styles.iconWrapper}>
|
|
<ChevronDownIcon
|
|
className={styles.chevron}
|
|
color="burgundy"
|
|
width={20}
|
|
height={20}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</summary>
|
|
<div className={styles.tierContent}>
|
|
<div className={styles.tierInfo}>
|
|
<div className={styles.tierTitle}>
|
|
<Subtitle color="burgundy">{tierMatch.title}</Subtitle>
|
|
</div>
|
|
<div>{children}</div>
|
|
</div>
|
|
{tierMatch.link?.href && (
|
|
<ReadMoreLink href={tierMatch.link.href}>
|
|
{tierMatch.link.title}
|
|
</ReadMoreLink>
|
|
)}
|
|
</div>
|
|
</details>
|
|
)
|
|
}
|
|
|
|
function ReadMoreLink({
|
|
href,
|
|
children,
|
|
}: {
|
|
href: string
|
|
children: ReactNode
|
|
}) {
|
|
return (
|
|
<Link href={href} className={styles.link} weight="bold" color="burgundy">
|
|
{children}
|
|
<ArrowRightIcon color="burgundy" />
|
|
</Link>
|
|
)
|
|
}
|
|
|
|
function ColumnTitle({ children }: { children?: ReactNode }) {
|
|
return (
|
|
<div className={styles.columnTitle}>
|
|
<Caption type="bold" asChild>
|
|
<span>{children}</span>
|
|
</Caption>
|
|
</div>
|
|
)
|
|
}
|