geoproject-app/src/components/blocks/MapBlock.vue

<template>
  <div v-if="content.template === 'carte'" class="block-map">
    <h4>{{ content.title }}</h4>
    <img v-if="content.image" :src="content.image" class="carte-image" alt="" />
    <div v-if="content.tags && content.tags.length" class="tags">
      <span v-for="tag in content.tags" :key="tag" class="tag">{{ tag }}</span>
    </div>
    <div v-if="content.intro" class="intro" v-html="content.intro"></div>
    <div v-if="content.markers && content.markers.length" class="markers">
      <div v-for="(marker, idx) in content.markers" :key="idx" class="marker">
        <h5 class="marker-title">
          <img
            v-if="marker.icon"
            :src="marker.icon"
            class="marker-icon"
            :style="{ width: marker.iconSize + 'px', height: marker.iconSize + 'px' }"
            alt=""
          />
          <img
            v-else
            src="/assets/svg/marker-pin.svg"
            class="marker-icon marker-icon--default"
            alt=""
          />
          {{ marker.title }}
        </h5>
        <img v-if="marker.cover" :src="marker.cover" class="marker-cover" alt="" />
        <template v-if="marker.blocks">
          <component
            v-for="block in visibleBlocks(marker.blocks)"
            :key="block.id"
            :is="getBlockComponent(block.type)"
            :content="block.content"
          />
        </template>
      </div>
    </div>
  </div>
  <div v-else class="block-map">
    <p class="map-placeholder">[Carte: {{ content.map }}]</p>
  </div>
</template>

<script setup>
import TextBlock from './TextBlock.vue';
import HeadingBlock from './HeadingBlock.vue';
import ImageBlock from './ImageBlock.vue';
import ListBlock from './ListBlock.vue';
import QuoteBlock from './QuoteBlock.vue';

defineProps({
  content: {
    type: Object,
    required: true
  }
});

const visibleBlocks = (blocks) => {
  return blocks.filter((block) => !block.isHidden);
};

const getBlockComponent = (type) => {
  const components = {
    text: TextBlock,
    heading: HeadingBlock,
    image: ImageBlock,
    list: ListBlock,
    quote: QuoteBlock,
  };
  return components[type] || TextBlock;
};
</script>