Files
web/components/Loyalty/Blocks/DynamicContent/index.tsx
2024-05-02 11:40:22 +02:00

69 lines
1.8 KiB
TypeScript

import Link from "@/components/TempDesignSystem/Link"
import Title from "@/components/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:
// TODO: IMPLEMENT OVERVIEW TABLE!
return <OverviewTable />
default:
return null
}
}
export default function DynamicContent({
dynamicContent,
}: DynamicContentProps) {
return (
<section className={styles.container}>
<header className={styles.titleContainer}>
{dynamicContent.title && (
<Title
as="h3"
level="h2"
className={styles.title}
weight="semiBold"
uppercase
>
{dynamicContent.title}
</Title>
)}
{dynamicContent.link ? (
<Link className={styles.link} href={dynamicContent.link.href}>
{dynamicContent.link.text}
</Link>
) : null}
{dynamicContent.subtitle && (
<Title
as="h5"
level="h3"
weight="regular"
className={styles.subtitle}
>
{dynamicContent.subtitle}
</Title>
)}
</header>
<div>
<DynamicComponentBlock component={dynamicContent.component} />
</div>
</section>
)
}