designtopack/src/components/design-to-light/DTLPanel.vue

<template>
  <aside>
    <p>Données basées sur la proposition du {{ frenchFormattedModified }}</p>
    <p>{{ page.designToLight.stepLabel }}</p>

    <h4>Note globale</h4>
    <p>{{ page.designToLight.grades.global.letter }}</p>
    <p>{{ page.designToLight.grades.global.mention }}</p>
    <input
      type="range"
      :value="page.designToLight.grades.global.number"
      disabled
    />
    <p>{{ page.designToLight.grades.global.comment }}</p>

    <h4>Positionnement</h4>

    <h4>Indicateur des composants impliqués</h4>
    <template
      v-for="indicator in page.designToLight.grades.indicators"
      :key="indicator.value"
    >
      <label for="">{{ indicator.label }}</label>
      <input type="range" :value="indicator.value" min="-5" max="+5" disabled />
    </template>

    <!-- Je laisse pour le moment en suspend l'effet de ce bouton car je ne suis pas sûr de comprendre. J'ai mis un commentaire sur Figma -->
    <button>Demander une expertise d'optimisation</button>
  </aside>
</template>
<script setup>
import { storeToRefs } from "pinia";
import { usePageStore } from "../../stores/page";
import dayjs from "dayjs";
import "dayjs/locale/fr";
import { computed } from "vue";

dayjs.locale("fr");

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

const frenchFormattedModified = dayjs(page.value.designToLight.date).format(
  "D/MM/YYYY"
);
</script>

<style scoped>
aside {
  position: fixed;
  right: 1rem;
  top: 1rem;
  bottom: 1rem;
  padding: 0.7rem;
  width: 30vw;
  border-radius: 1rem;
  background-color: #191919;
  color: #fff;
}
</style>