designtopack/src/components/inspirations/Selector.vue

<template>
  <!-- TODO: dynamiser la valeur de l'attribut style: url('inspiration.cover') -->
  <div
    id="inspiration-select"
    class="flex"
    style="
      --image: url('https://plus.unsplash.com/premium_photo-1675626791716-7f74187592f1?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');
    "
  >
    <label for="inspirations">Choisir une inspiration</label>
    <Select id="inspirations" v-model="selectedInspiration" :options="inspirations" optionLabel="name" optionValue="value"  class="" />
    </div>
</template>

<script setup>
import { ref } from "vue";

const selectedInspiration = ref();
const inspirations = ref([
    { name: 'Shape of Nature', value: 'shape-of-nature', selected: true },
    { name: 'Inspiration Title', value: 'inspiration-title' }
]);
</script>

<style scoped>
#inspiration-select {
  --direction: column;
  --items: flex-start;
  --wrap: no-wrap;
  --row-gap: 0;
  position: relative;
  float: right;
  background: var(--color-background);
  border-radius: var(--rounded-full);
  height: 3.75rem;
  padding: var(--space-8) var(--space-48) var(--space-8) var(--space-64);
  margin-bottom: var(--space-16);
}
#inspiration-select::before {
  content: "";
  position: absolute;
  left: var(--space-8);
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--rounded-full);
  background-image: var(--image);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
</style>