"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 "./sas-tier-comparison.module.css" import type { ReactNode } from "react" import type { SasTierComparison } from "@/types/trpc/routers/contentstack/blocks" type SasTierComparisonContent = SasTierComparison["sas_tier_comparison"] type TierComparisonProps = { content: SasTierComparisonContent } export function SasTierComparison({ content }: TierComparisonProps) { const comparisonContent = content.sasTierComparison if (!comparisonContent) return null return (
{comparisonContent.title} {comparisonContent.preamble && (

{comparisonContent.preamble}

)}
Scandic logo SAS logo {comparisonContent.scandic_column_title} {comparisonContent.sas_column_title}
{comparisonContent.tier_matches.map((tierMatch, i) => ( ))}
{comparisonContent.cta?.href && ( )} ) } type TierMatch = NonNullable< SasTierComparisonContent["sasTierComparison"] >["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}
) }