feat: Initial TheSections

wp-content/themes/ccat/app/components/sections/SectionTextBlock.fragment.gql

@@ -0,0 +1,3 @@
+fragment SectionTextBlock on GroupAbstractBuilderSectionsTextBlockLayout {
+  content
+}

wp-content/themes/ccat/app/components/sections/SectionTextBlock.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import type { SectionTextBlockFragment } from "#graphql-operations";
+
+defineProps<SectionTextBlockFragment>();
+</script>
+
+<template>
+  <section data-section-type="text-block">
+    <div v-html="content" />
+  </section>
+</template>

wp-content/themes/ccat/app/components/sections/TheSection.fragment.gql

@@ -0,0 +1,6 @@
+fragment TheSection on GroupAbstractBuilderSections_Layout {
+  fieldGroupName
+  ... on GroupAbstractBuilderSectionsTextBlockLayout {
+    ...SectionTextBlock
+  }
+}

wp-content/themes/ccat/app/components/sections/TheSections.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts">
+import type { TheSectionFragment } from "#graphql-operations";
+
+const props = defineProps<{ sections: (TheSectionFragment)[] }>();
+const sections = props.sections.map(useSection);
+</script>
+
+<template>
+  <component :is="component" v-for="({ component, attrs }, i) in sections" :key="i" v-bind="attrs" />
+</template>