43 lines
1.4 KiB
Vue
43 lines
1.4 KiB
Vue
<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>
|
|
<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>
|