designtopack/src/components/project/Project.vue

<template>
  <article class="project-item | flex | rounded-2xl | px-32 py-32">
    <hgroup>
      <h3>
        <router-link
          :to="isEmptyBrief(project) ? project.uri + '/client-brief' : project.uri"
          class="link-full"
        >
        {{ project.title }}
        </router-link>
      </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>
</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, isEmptyBrief } = useProjectStore();
</script>