my-notes-viewer/frontend/src/blocks/BlockRenderer.svelte

<script lang="ts">
    /**
     * BlockRenderer — renders ContentBlockEntry[] by type.
     *
     * Each block type maps to a dedicated Svelte component.
     * Unknown types are silently skipped (or shown in dev mode).
     * Easy to extend: add a new component import + case.
     *
     * DEMO: This file is part of the demo showcase.
     * For real projects, adjust block types and components as needed.
     */
    import HeroBlock from "./HeroBlock.svelte"
    import FeaturesBlock from "./FeaturesBlock.svelte"
    import RichtextBlock from "./RichtextBlock.svelte"
    import AccordionBlock from "./AccordionBlock.svelte"
    import ContactFormBlock from "./ContactFormBlock.svelte"

    let { blocks = [] }: { blocks: ContentBlockEntry[] } = $props()
</script>

{#each blocks as block, i (i)}
    {#if !block.hide}
        {#if block.type === "hero"}
            <HeroBlock {block} />
        {:else if block.type === "features"}
            <FeaturesBlock {block} />
        {:else if block.type === "richtext"}
            <RichtextBlock {block} />
        {:else if block.type === "accordion"}
            <AccordionBlock {block} />
        {:else if block.type === "contact-form"}
            <ContactFormBlock {block} />
        {:else}
            <!-- Unknown block type: {block.type} -->
            {#if typeof window !== "undefined" && window.location?.hostname === "localhost"}
                <div
                    class="max-w-6xl mx-auto px-6 py-4 bg-yellow-50 border border-yellow-200 rounded-lg my-4 text-sm text-yellow-800"
                >
                    Unknown block type: <code>{block.type}</code>
                </div>
            {/if}
        {/if}
    {/if}
{/each}