104 lines
4.9 KiB
TypeScript
104 lines
4.9 KiB
TypeScript
import type { PageSection, Category, AccordionSectionPayload, ContactInfoSectionPayload, ContactFormSectionPayload } from '@homaroma/types';
|
|
import DynamicHero from './DynamicHero';
|
|
import DynamicHeroV2 from './DynamicHeroV2';
|
|
import DynamicUspBar from './DynamicUspBar';
|
|
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';
|
|
import DynamicHeroArticle from './DynamicHeroArticle';
|
|
import DynamicScentNotesBreakdown from './DynamicScentNotesBreakdown';
|
|
import DynamicQuoteCallout from './DynamicQuoteCallout';
|
|
import DynamicProductCarousel from './DynamicProductCarousel';
|
|
import DynamicRichText from './DynamicRichText';
|
|
import AccordionSection from './sections/AccordionSection';
|
|
import ContactInfoSection from './sections/ContactInfoSection';
|
|
import ContactFormSection from './sections/ContactFormSection';
|
|
import ScrollReveal from './ScrollReveal';
|
|
|
|
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()) {
|
|
// ไม่ animate — แสดงตั้งแต่ต้น
|
|
case 'ANNOUNCEMENT_BAR':
|
|
return <DynamicAnnouncementBar key={section.id} payload={section.payload} />;
|
|
case 'HERO':
|
|
return <DynamicHero key={section.id} payload={section.payload} />;
|
|
case 'HERO_V2':
|
|
return <DynamicHeroV2 key={section.id} payload={section.payload} />;
|
|
case 'USP_BAR':
|
|
return <DynamicUspBar key={section.id} payload={section.payload} />;
|
|
|
|
// animate เมื่อ scroll เข้า viewport
|
|
case 'NEWSLETTER':
|
|
return <ScrollReveal key={section.id}><DynamicNewsletter payload={section.payload} /></ScrollReveal>;
|
|
case 'CATEGORIES':
|
|
return (
|
|
<ScrollReveal key={section.id}>
|
|
<DynamicCategories
|
|
payload={section.payload}
|
|
categories={categories}
|
|
loading={categoriesLoading}
|
|
/>
|
|
</ScrollReveal>
|
|
);
|
|
case 'PRODUCTS':
|
|
return (
|
|
<ScrollReveal key={section.id}>
|
|
<DynamicProducts
|
|
payload={section.payload}
|
|
categories={categories}
|
|
/>
|
|
</ScrollReveal>
|
|
);
|
|
case 'BANNER':
|
|
return <ScrollReveal key={section.id}><DynamicBanner payload={section.payload} /></ScrollReveal>;
|
|
case 'TEXT':
|
|
return <ScrollReveal key={section.id}><DynamicText payload={section.payload} /></ScrollReveal>;
|
|
case 'RICH_TEXT':
|
|
return <ScrollReveal key={section.id}><DynamicRichText section={section} /></ScrollReveal>;
|
|
case 'EDITORIAL_TILE':
|
|
return <ScrollReveal key={section.id}><DynamicEditorialTile payload={section.payload} /></ScrollReveal>;
|
|
case 'EDITORIAL_CAROUSEL':
|
|
return <ScrollReveal key={section.id}><DynamicEditorialCarousel payload={section.payload} /></ScrollReveal>;
|
|
case 'HERO_ARTICLE':
|
|
return <ScrollReveal key={section.id}><DynamicHeroArticle payload={section.payload} /></ScrollReveal>;
|
|
case 'SCENT_NOTES_BREAKDOWN':
|
|
return <ScrollReveal key={section.id}><DynamicScentNotesBreakdown payload={section.payload} /></ScrollReveal>;
|
|
case 'QUOTE_CALLOUT':
|
|
return <ScrollReveal key={section.id}><DynamicQuoteCallout payload={section.payload} /></ScrollReveal>;
|
|
case 'PRODUCT_CAROUSEL':
|
|
return <ScrollReveal key={section.id}><DynamicProductCarousel payload={section.payload} /></ScrollReveal>;
|
|
case 'ACCORDION':
|
|
return <ScrollReveal key={section.id}><AccordionSection payload={section.payload as AccordionSectionPayload & { title?: string }} /></ScrollReveal>;
|
|
case 'CONTACT_INFO':
|
|
return <ScrollReveal key={section.id}><ContactInfoSection payload={section.payload as ContactInfoSectionPayload & { title?: string }} /></ScrollReveal>;
|
|
case 'CONTACT_FORM':
|
|
return <ScrollReveal key={section.id}><ContactFormSection payload={section.payload as ContactFormSectionPayload} /></ScrollReveal>;
|
|
default:
|
|
console.warn(`[DynamicPageRenderer] Unknown block type: ${section.type}`);
|
|
return null;
|
|
}
|
|
})}
|
|
</div>
|
|
);
|
|
}
|