From 2b9a87511bf03a3e63fce79c01c5228b6254345b Mon Sep 17 00:00:00 2001
From: Pascal Martineau <pascal@lewebsimple.ca>
Date: Tue, 13 Jan 2026 21:36:26 -0500
Subject: [PATCH] feat: BuilderSections component

---
 .../components/builder/BuilderSections.vue    | 19 +++++++++++++++++--
 ...tBlock.vue => SectionTextBlock.global.vue} |  0
 2 files changed, 17 insertions(+), 2 deletions(-)
 rename wp-content/themes/moonshine/app/components/sections/{SectionTextBlock.vue => SectionTextBlock.global.vue} (100%)

diff --git a/wp-content/themes/moonshine/app/components/builder/BuilderSections.vue b/wp-content/themes/moonshine/app/components/builder/BuilderSections.vue
index abdf203..47cfcb3 100644
--- a/wp-content/themes/moonshine/app/components/builder/BuilderSections.vue
+++ b/wp-content/themes/moonshine/app/components/builder/BuilderSections.vue
@@ -1,9 +1,24 @@
 <script setup lang="ts">
 import type { BuilderSectionsFragment } from "#graphql/typed-documents";
 
-defineProps<BuilderSectionsFragment>();
+const props = defineProps<BuilderSectionsFragment>();
+const sections = computed(() => {
+  return (props.sections || [])
+    .filter((section) => !!section)
+    .map(({ __typename, ...attrs }) => ({
+      componentName: __typename.replace(/^GroupAbstractBuilderSections(.+?)Layout$/, "Section$1"),
+      attrs,
+    }));
+});
 </script>
 
 <template>
-  <pre>{{ sections }}</pre>
+  <div id="builder-sections">
+    <Component
+      :is="componentName"
+      v-for="({ componentName, attrs }, index) in sections"
+      :key="index"
+      v-bind="attrs"
+    />
+  </div>
 </template>
diff --git a/wp-content/themes/moonshine/app/components/sections/SectionTextBlock.vue b/wp-content/themes/moonshine/app/components/sections/SectionTextBlock.global.vue
similarity index 100%
rename from wp-content/themes/moonshine/app/components/sections/SectionTextBlock.vue
rename to wp-content/themes/moonshine/app/components/sections/SectionTextBlock.global.vue