feat(WEB-304): remaning UI from design system primitives

components/Loyalty/Blocks/DynamicContent/index.tsx

@@ -1,9 +1,7 @@
 import { serverClient } from "@/lib/trpc/server"
 
 import { auth } from "@/auth"
-import Link from "@/components/TempDesignSystem/Link"
-import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
-import Title from "@/components/TempDesignSystem/Text/Title"
+import Header from "@/components/MyPages/Blocks/Header"
 
 import HowItWorks from "./HowItWorks"
 import LoyaltyLevels from "./LoyaltyLevels"
@@ -36,9 +34,10 @@ async function DynamicComponentBlock({ component }: DynamicComponentProps) {
 
 export default function DynamicContent({
   dynamicContent,
+  firstItem,
 }: DynamicContentProps) {
   const displayHeader = !!(
-    dynamicContent.title ||
+    dynamicContent.link ||
     dynamicContent.subtitle ||
     dynamicContent.title
   )
@@ -46,19 +45,12 @@ export default function DynamicContent({
   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>
+        <Header
+          link={dynamicContent.link}
+          subtitle={dynamicContent.subtitle}
+          title={dynamicContent.title}
+          topTitle={firstItem}
+        />
       ) : null}
       <DynamicComponentBlock component={dynamicContent.component} />
     </section>