fix: Update preview logic to support page blocks

This commit is contained in:
cawcenter
2025-12-13 21:09:09 -05:00
parent b25429dceb
commit 93734c8966

View File

@@ -103,6 +103,7 @@ if (!page) {
</div> </div>
</div> </div>
<!-- Page Content -->
<!-- Page Content --> <!-- Page Content -->
<div class="preview-content"> <div class="preview-content">
{error ? ( {error ? (
@@ -111,21 +112,44 @@ if (!page) {
<p>{error}</p> <p>{error}</p>
</div> </div>
) : ( ) : (
<> <div class="page-blocks" style="display: flex; flex-direction: column; gap: 40px;">
<h1 style="font-size: 2.5rem; margin-bottom: 1rem; font-weight: 700;"> {/* Render Blocks */}
{page.title} {page.blocks && Array.isArray(page.blocks) ? page.blocks.map((block: any) => {
</h1> if (block.block_type === 'hero') {
return (
{page.content && ( <div style="background: #111; color: white; padding: 60px 20px; text-align: center; border-radius: 12px;">
<h1 style="font-size: 3rem; margin-bottom: 20px;">{block.block_config?.title}</h1>
<p style="font-size: 1.5rem; color: #ccc;">{block.block_config?.subtitle}</p>
</div>
);
}
if (block.block_type === 'content') {
return (
<div style="max-width: 800px; margin: 0 auto; line-height: 1.8; color: #333; font-size: 1.1rem;">
<Fragment set:html={block.block_config?.content || ''} />
</div>
);
}
if (block.block_type === 'features') {
return (
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px; padding: 40px 0;">
{block.block_config?.items?.map((item: any) => (
<div style="background: #f9f9f9; padding: 30px; border-radius: 8px; border: 1px solid #eee;">
<h3 style="margin-top: 0; font-size: 1.2rem; font-weight: bold;">{item.title}</h3>
<p style="color: #666; margin-bottom: 0;">{item.desc}</p>
</div>
))}
</div>
);
}
return null;
}) : (
// Fallback for legacy content field
<div style="line-height: 1.8; color: #333;"> <div style="line-height: 1.8; color: #333;">
<Fragment set:html={page.content} /> <Fragment set:html={page.content || '<p>No content.</p>'} />
</div> </div>
)} )}
</div>
{!page.content && (
<p style="color: #999; font-style: italic;">No content yet</p>
)}
</>
)} )}
</div> </div>
</body> </body>