designtopack/src/components/project/virtual-sample/DynamicView.vue

<template>
  <div class="dialog__inner">
    <header class="flex">
      <div class="options-selector">
        <button
          v-for="(track, index) in tracks"
          class="btn btn--image"
          :aria-pressed="activeTrack === track ? true : false"
          :aria-controls="track.slug"
          :style="`--btn-image: url(${getFrontViewUrl(track)});`"
          @click="
            activeTrack = track;
            currentX = 0;
            currentY = 0;
          "
        >
          <span>{{ track.title }}</span>
        </button>
      </div>
      <button class="btn | ml-auto" disabled>
        <span>Comparer les pistes</span>
      </button>
    </header>

    <div class="track">
      <Interactive360
        v-if="activeTrack.files.length > 1"
        :activeTrack="activeTrack"
      />
      <figure>
        <img :src="activeTrack.files[0].url" alt="" />
      </figure>
    </div>
  </div>
</template>
<script setup>
import { ref, computed } from "vue";
import { storeToRefs } from "pinia";
import { usePageStore } from "../../../stores/page";
import Interactive360 from "./Interactive360.vue";

const { page } = storeToRefs(usePageStore());

const tracks = computed(
  () => page.value.steps[page.value.steps.length - 1].files.dynamic
);

const activeTrack = ref(tracks.value[0]);

function getFrontViewUrl(track) {
  if (track.files.length > 1) {
    return track.files[7].url;
  } else {
    return track.files[0].url;
  }
}
</script>

<style>
.track figure {
  position: relative;
}

.track .drag-zone {
  position: absolute;
  inset: 0;
  z-index: 2;
}
</style>