x

apps/spa/src/components/DynamicPageRenderer.tsx

@@ -0,0 +1,61 @@
+import type { PageSection, Category } from '@homaroma/types';
+import DynamicHero from './DynamicHero';
+import DynamicCategories from './DynamicCategories';
+import DynamicProducts from './DynamicProducts';
+import DynamicBanner from './DynamicBanner';
+import DynamicText from './DynamicText';
+import DynamicAnnouncementBar from './DynamicAnnouncementBar';
+import DynamicNewsletter from './DynamicNewsletter';
+import DynamicEditorialTile from './DynamicEditorialTile';
+import DynamicEditorialCarousel from './DynamicEditorialCarousel';
+
+interface DynamicPageRendererProps {
+  sections: PageSection[];
+  categories: Category[];
+  categoriesLoading: boolean;
+}
+
+export default function DynamicPageRenderer({
+  sections,
+  categories,
+  categoriesLoading
+}: DynamicPageRendererProps) {
+  return (
+    <div className="flex flex-col w-full">
+      {sections.map((section) => {
+        if (!section.isActive) return null;
+
+        switch (section.type.toUpperCase()) {
+          case 'ANNOUNCEMENT_BAR':
+            return <DynamicAnnouncementBar key={section.id} payload={section.payload} />;
+          case 'NEWSLETTER':
+            return <DynamicNewsletter key={section.id} payload={section.payload} />;
+          case 'HERO':
+            return <DynamicHero key={section.id} payload={section.payload} />;
+          case 'CATEGORIES':
+            return (
+              <DynamicCategories
+                key={section.id}
+                payload={section.payload}
+                categories={categories}
+                loading={categoriesLoading}
+              />
+            );
+          case 'PRODUCTS':
+            return <DynamicProducts key={section.id} payload={section.payload} />;
+          case 'BANNER':
+            return <DynamicBanner key={section.id} payload={section.payload} />;
+          case 'TEXT':
+            return <DynamicText key={section.id} payload={section.payload} />;
+          case 'EDITORIAL_TILE':
+            return <DynamicEditorialTile key={section.id} payload={section.payload} />;
+          case 'EDITORIAL_CAROUSEL':
+            return <DynamicEditorialCarousel key={section.id} payload={section.payload} />;
+          default:
+            console.warn(`[DynamicPageRenderer] Unknown block type: ${section.type}`);
+            return null;
+        }
+      })}
+    </div>
+  );
+}