Files
web/components/Loyalty/Blocks/DynamicContent/index.tsx
2024-05-30 17:56:56 +02:00

59 lines
1.7 KiB
TypeScript

import Link from "@/components/TempDesignSystem/Link"
import Subtitle from "@/components/TempDesignSystem/Subtitle"
import Title from "@/components/TempDesignSystem/Title"
import HowItWorks from "./HowItWorks"
import LoyaltyLevels from "./LoyaltyLevels"
import OverviewTable from "./OverviewTable"
import styles from "./dynamicContent.module.css"
import type {
DynamicComponentProps,
DynamicContentProps,
} from "@/types/components/loyalty/blocks"
import { LoyaltyComponentEnum } from "@/types/components/loyalty/enums"
function DynamicComponentBlock({ component }: DynamicComponentProps) {
switch (component) {
case LoyaltyComponentEnum.how_it_works:
return <HowItWorks />
case LoyaltyComponentEnum.loyalty_levels:
return <LoyaltyLevels />
case LoyaltyComponentEnum.overview_table:
return <OverviewTable />
default:
return null
}
}
export default function DynamicContent({
dynamicContent,
}: DynamicContentProps) {
const displayHeader = !!(
dynamicContent.title ||
dynamicContent.subtitle ||
dynamicContent.title
)
return (
<section className={styles.container}>
{displayHeader ? (
<header className={styles.titleContainer}>
<Title as="h3" className={styles.title} level="h2">
{dynamicContent.title}
</Title>
{dynamicContent.link ? (
<Link className={styles.link} href={dynamicContent.link.href}>
{dynamicContent.link.text}
</Link>
) : null}
<Subtitle className={styles.subtitle}>
{dynamicContent.subtitle}
</Subtitle>
</header>
) : null}
<DynamicComponentBlock component={dynamicContent.component} />
</section>
)
}