Files
web/components/Loyalty/Blocks/DynamicContent/index.tsx
2024-04-29 14:02:03 +02:00

74 lines
2.0 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 { DynamicContentProps } from "@/types/components/loyalty/blocks"
import {
LoyaltyComponent,
LoyaltyComponentEnum,
} from "@/types/requests/loyaltyPage"
function DynamicComponentBlock({ component }: { component: LoyaltyComponent }) {
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) {
const link = dynamicContent.link.pageConnection.edges.length
? dynamicContent.link.pageConnection.edges[0].node.url
: null
return (
<section className={styles.container}>
<header>
<div className={styles.titleContainer}>
{dynamicContent.title && (
<Title
as="h3"
level="h2"
className={styles.title}
weight="semiBold"
uppercase
>
{dynamicContent.title}
</Title>
)}
{link && (
<Link className={styles.link} href={link}>
{dynamicContent.link.text}
</Link>
)}
</div>
{dynamicContent.subtitle && (
<Title
as="h5"
level="h3"
weight="regular"
className={styles.subtitle}
>
{dynamicContent.subtitle}
</Title>
)}
</header>
<div>
<DynamicComponentBlock component={dynamicContent.component} />
</div>
</section>
)
}