feat: BuilderSections component

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>