{title}

"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 } export function SasTierComparison({ title, preamble, tierComparison, }: TierComparisonProps) { return (

{title} {preamble &&

{preamble}

}

{tierComparison.scandic_column_title} {tierComparison.sas_column_title}

{tierComparison.tier_matches.map((tierMatch, i) => ( ))}

{tierComparison.cta?.href && ( )} ) } type TierMatch = NonNullable["tier_matches"][number] function TierDetails({ children, tierMatch, }: { children: React.ReactNode tierMatch: TierMatch }) { return (

{tierMatch.scandic_friends_tier_name}

{tierMatch.sas_eb_tier_name}

{tierMatch.title}

{children}

{tierMatch.link?.href && ( {tierMatch.link.title} )}

) } function ReadMoreLink({ href, children, }: { href: string children: ReactNode }) { return ( {children} ) } function ColumnTitle({ children }: { children?: ReactNode }) { return (

{children}

) }