detail page port

components/slices/Map.vue

@@ -0,0 +1,32 @@
+<template>
+    <component
+        v-for="(slice, index) in slices"
+        :key="index"
+        :is="mapComponent(slice)"
+        :slice="slice"
+    />
+</template>
+
+<script setup>
+import Carousel from '@/components/slices/Carousel.vue'
+import Content from '@/components/slices/Content.vue'
+import FullBleedMedia from '@/components/slices/FullBleedMedia.vue'
+import Quote from '@/components/slices/Quote.vue'
+
+const MAP = {
+    carousel: Carousel,
+    content: Content,
+    full_bleed_media: FullBleedMedia,
+    quote: Quote,
+}
+
+const props = defineProps({
+    slices: Array,
+})
+
+const mapComponent = (slice) => {
+    if (!slice?.slice_type) return
+
+    return MAP[slice.slice_type]
+}
+</script>