designtopack/src/components/project/Project.vue

<template>
  <article
    class="project-item | flex | rounded-2xl | px-32 py-32"
    :data-dtl="project.isDTLEnabled ? 'true' : undefined"
  >
    <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: Object });

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

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