content text and dynamic zone components

components/field/Content.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class="w-full h-fit flex flex-col gap-2">
+    <div v-for="item in data" :key="item.type" class="contents">
+      <h1 v-if="item.type == 'heading'" class="w-full">
+        <FieldType v-for="child in item.children" :data="child" />
+      </h1>
+      <p v-else-if="item.type == 'paragraph'" class="w-full">
+        <FieldType v-for="child in item.children" :data="child" />
+      </p>
+      <div v-else-if="item.type == 'quote'" class="w-full p-3">
+        <p class="p-3 bg-gray-200 border-l-2 border-gray-500">
+          <FieldType v-for="child in item.children" :data="child" />
+        </p>
+      </div>
+      <ol
+        v-else-if="item.type == 'list'"
+        class="w-full"
+        :class="item.format == 'unordered' ? 'list-disc' : 'list-decimal'"
+      >
+        <li v-for="list in item.children" class="ml-6">
+          <FieldType v-for="child in list.children" :data="child" />
+        </li>
+      </ol>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { PropType } from "vue";
+import type ContentField from "../../types/field/content";
+
+defineProps({
+  data: Object as PropType<ContentField>,
+});
+</script>

components/field/Text.vue

@@ -0,0 +1,21 @@
+<template>
+  <span
+    v-for="text in data"
+    :key="text.text"
+    :class="[
+      text.bold ? 'font-bold' : '',
+      text.strikethrough ? 'line-through' : '',
+      text.underline ? 'underline' : '',
+      text.italic ? 'italic' : '',
+    ]"
+    >{{ text.text }}</span
+  >
+</template>
+
+<script setup lang="ts">
+import type { TextField } from "../../types/field/content";
+
+defineProps({
+  data: Array<TextField>,
+});
+</script>

components/field/Type.vue

@@ -0,0 +1,15 @@
+<template>
+  <FieldText v-if="data?.type == 'text'" :data="[data]" />
+  <NuxtLink v-else :href="data?.url" class="text-primary">
+    <FieldText :data="data?.children" />
+  </NuxtLink>
+</template>
+
+<script setup lang="ts">
+import type { PropType } from "vue";
+import type { TypeField } from "../../types/field/content";
+
+defineProps({
+  data: Object as PropType<TypeField>,
+});
+</script>