designtopack/src/components/project/Project.vue

<template>
  <router-link :to="project.uri">
    <article class="project-item | flex | rounded-2xl | px-32 py-32">
      <hgroup>
        <h3>{{ project.title }}</h3>
        <p>
          Dernière mise à jour le
          <time :datetime="project.modified">{{
            frenchFormattedModified
          }}</time>
        </p>
      </hgroup>
      <img :src="project.logo" alt="Logo" class="project-logo | rounded-sm" />
      <ol class="project-steps" :data-steps="project.steps.length" :style="'--steps:'+project.steps.length">
        <li
          v-for="step in project.steps"
          class="project-step"
          :data-status="setStatus(project.steps, project.currentStep, step)"
        >
          <span class="pill" :data-icon="step.id">
            <span>{{ step.label }}</span>
          </span>
        </li>
      </ol>
    </article>
  </router-link>
</template>

<script setup>
import dayjs from "dayjs";
import "dayjs/locale/fr";
import { useProjectStore } from "../../stores/project";

dayjs.locale("fr");

const { project } = defineProps({ project: Array });

const frenchFormattedModified = dayjs(project.modified).format(
  "dddd D MMMM YYYY"
);

const { stepsLabels, setStatus } = useProjectStore();
</script>