detail page port

components/slices/Carousel.vue

@@ -0,0 +1,50 @@
+<template>
+    <section
+        class="slices-carousel"
+        :data-slice-type="slice.slice_type"
+        :data-slice-variation="slice.variation"
+    >
+        <slider :emblaOptions="{ loop: true }" controls>
+            <prismic-media
+                class="item"
+                v-for="item in items"
+                :image="item.image"
+                :video="item.video"
+                aspect="100"
+            />
+        </slider>
+    </section>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import Slider from '@/components/Slider.vue'
+import PrismicMedia from '@/components/prismic/Media.vue'
+
+const props = defineProps({
+    slice: Object,
+})
+
+const items = computed(() => props.slice?.primary?.items || [])
+</script>
+
+<style lang="scss">
+.slices-carousel {
+    margin-top: desktop-vw(100px);
+    margin-bottom: desktop-vw(100px);
+    position: relative;
+
+    .item {
+        width: desktop-vw(640px);
+    }
+
+    @include mobile {
+        margin-top: mobile-vw(100px);
+        margin-bottom: mobile-vw(100px);
+
+        .item {
+            width: mobile-vw(300px);
+        }
+    }
+}
+</style>

components/slices/Content.vue

@@ -0,0 +1,57 @@
+<template>
+    <section
+        class="slices-content"
+        :data-slice-type="slice.slice_type"
+        :data-slice-variation="slice.variation"
+    >
+        <prismic-rich-text class="body entry" :field="slice.primary.body" />
+    </section>
+</template>
+
+<script setup>
+import PrismicRichText from '@/components/prismic/RichText.vue'
+
+const props = defineProps({
+    slice: Object,
+})
+</script>
+
+<style lang="scss">
+.slices-content {
+    margin-top: desktop-vw(31px);
+    margin-bottom: desktop-vw(31px);
+
+    .body {
+        width: desktop-vw(640px);
+        margin: auto;
+
+        h2 {
+            text-align: center;
+            margin-bottom: desktop-vw(31px);
+            @include h5;
+        }
+        p,
+        a,
+        ul {
+            text-transform: none;
+        }
+        p {
+            text-align: justify;
+        }
+    }
+
+    @include mobile {
+        margin-top: mobile-vw(31px);
+        margin-bottom: mobile-vw(31px);
+
+        .body {
+            width: 100%;
+            padding: 0 var(--layout-margin);
+
+            h2 {
+                margin-bottom: mobile-vw(31px);
+            }
+        }
+    }
+}
+</style>

components/slices/FullBleedMedia.vue

@@ -0,0 +1,61 @@
+<template>
+    <section
+        :class="[
+            'slices-full-bleed-media',
+            { diptych: items.length === 2, inset: slice.primary.inset },
+        ]"
+        :data-slice-type="slice.slice_type"
+        :data-slice-variation="slice.variation"
+    >
+        <prismic-media v-for="item in items" :image="item.image" />
+    </section>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import PrismicMedia from '@/components/prismic/Media.vue'
+
+const props = defineProps({
+    slice: Object,
+})
+
+const items = computed(() => props.slice?.primary?.items || [])
+</script>
+
+<style lang="scss">
+.slices-full-bleed-media {
+    margin-top: desktop-vw(100px);
+    margin-bottom: desktop-vw(100px);
+    display: flex;
+    width: 100%;
+
+    .prismic-media {
+        flex: 1;
+    }
+
+    &.diptych {
+        .prismic-media {
+            border: 1px solid var(--black);
+        }
+    }
+    &.inset {
+        padding: 0 desktop-vw(16px);
+        gap: desktop-vw(26px);
+
+        .prismic-media {
+            border: none;
+        }
+    }
+
+    @include mobile {
+        margin-top: mobile-vw(100px);
+        margin-bottom: mobile-vw(100px);
+        flex-direction: column;
+
+        &.inset {
+            padding: 0 var(--layout-margin);
+            gap: mobile-vw(29px);
+        }
+    }
+}
+</style>

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>

components/slices/Quote.vue

@@ -0,0 +1,51 @@
+<template>
+    <section
+        class="slices-quote"
+        :data-slice-type="slice.slice_type"
+        :data-slice-variation="slice.variation"
+    >
+        <div class="quote-wrap">
+            <blockquote class="quote q1">{{ slice.primary.text }}</blockquote>
+            <span class="attribution">
+                &mdash;&nbsp;{{ slice.primary.attribution }}
+            </span>
+        </div>
+    </section>
+</template>
+
+<script setup>
+const props = defineProps({
+    slice: Object,
+})
+</script>
+
+<style lang="scss">
+.slices-quote {
+    margin-top: desktop-size(50px);
+    margin-bottom: desktop-size(50px);
+
+    .quote-wrap {
+        width: desktop-vw(640px);
+        margin: auto;
+
+        .attribution {
+            display: block;
+            margin-top: desktop-vw(13px);
+        }
+    }
+
+    @include mobile {
+        margin-top: mobile-size(50px);
+        margin-bottom: mobile-size(50px);
+
+        .quote-wrap {
+            width: 100%;
+            padding: 0 var(--layout-margin);
+
+            .attribution {
+                margin-top: mobile-vw(13px);
+            }
+        }
+    }
+}
+</style>