single track selector working

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

@@ -2,18 +2,11 @@
   <div class="dialog__inner">
     <header class="tracks-header | flex">
       <div class="tracks">
-        <button
-          v-for="(track, index) in tracks"
-          class="btn btn--image"
-          :aria-pressed="activeTracks.includes(track) ? true : false"
-          :aria-controls="track.slug"
-          :id="track.slug"
-          :style="`--btn-image: url(${getFrontViewUrl(track)});`"
-          @click="selectTrack(track)"
-          :data-comments="getCommentsCount(track)"
-        >
-          <span>{{ track.title }}</span>
-        </button>
+        <Selector
+          :label="'piste'"
+          :items="tracks"
+          @update:selectedItems="selectTrack"
+        />
       </div>
       <button
         v-if="tracks.length > 1"
@@ -55,6 +48,7 @@ import { useVirtualSampleStore } from '../../../stores/virtualSample';
 import { useRoute } from 'vue-router';
 import Interactive360 from './Interactive360.vue';
 import SingleImage from './SingleImage.vue';
+import Selector from '../../Selector.vue';
 
 const route = useRoute();
 
@@ -122,14 +116,6 @@ watch(isCompareModeEnabled, (newValue) => {
   }
 });
 
-function getFrontViewUrl(track) {
-  if (track.files.length > 1) {
-    return track.files[7].url;
-  } else {
-    return track.files[0].url;
-  }
-}
-
 function selectTrack(track) {
   if (!isCompareModeEnabled.value) {
     activeTracks.value = [track];