<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' && item?.level == 1" class="w-full"> <FieldType v-for="child in item.children" :data="child" /> </h1> <h2 v-else-if="item.type == 'heading' && item?.level == 2" class="w-full"> <FieldType v-for="child in item.children" :data="child" /> </h2> <h3 v-else-if="item.type == 'heading'" class="w-full"> <FieldType v-for="child in item.children" :data="child" /> </h3> <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> <NuxtLink v-else-if="item.type == 'code'" primary :to="item.children[0].text.split('->')[0]" class="w-fit p-2 px-3 rounded-md mx-auto mt-3" > {{ item.children[0].text.split("->")[1] }} </NuxtLink> </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>