finish physical sample step

src/components/project/ProjectStep.vue

@@ -21,8 +21,10 @@ import { computed } from "vue";
 import { useProjectStore } from "../../stores/project";
 import { useRouter } from "vue-router";
 import ClientBrief from "./cards/ClientBrief.vue";
-import Proposal from "./cards/Proposal.vue";
-import ExtendedBrief from "./cards/ExtendedBrief.vue";
+import MultipleDocuments from "./cards/MultipleDocuments.vue";
+import SimpleDocument from "./cards/SimpleDocument.vue";
+import VirtualSample from "./cards/VirtualSample.vue";
+import PhysicalSample from "./cards/PhysicalSample.vue";
 
 const { step } = defineProps({
   step: Object,
@@ -30,8 +32,11 @@ const { step } = defineProps({
 
 const cardsMap = {
   clientBrief: ClientBrief,
-  proposal: Proposal,
-  extendedBrief: ExtendedBrief,
+  proposal: MultipleDocuments,
+  extendedBrief: SimpleDocument,
+  industrialIdeation: SimpleDocument,
+  virtualSample: VirtualSample,
+  physicalSample: PhysicalSample,
 };
 
 const emit = defineEmits(["update:file"]);

src/components/project/cards/PhysicalSample.vue

@@ -0,0 +1,27 @@
+<template>
+  <div class="card | physical-sample">
+    <header
+      class="text-center rounded-lg py-32"
+      :style="'--cover: url(' + step.cover + ')'"
+    >
+      <h3 class="text-lg font-serif">
+        <router-link :to="'/' + step.uri" class="link-full">{{
+          step.title
+        }}</router-link>
+      </h3>
+      <time class="font-medium text-sm py-8" :datetime="step.date">{{
+        step.date
+      }}</time>
+      <p>{{ step.description }}</p>
+    </header>
+    <img
+      :src="step.files[0].url"
+      alt=""
+      loading="lazy"
+      class="rounded-lg mt-16"
+    />
+  </div>
+</template>
+<script setup>
+const { step } = defineProps({ step: Object });
+</script>

src/components/project/cards/VirtualSample.vue

@@ -0,0 +1,24 @@
+<template>
+  <Images v-if="images.length > 0" :step="step" :images="images" />
+</template>
+<script setup>
+import Images from "./Images.vue";
+import { computed } from "vue";
+const { step } = defineProps({ step: Object });
+
+const images = computed(() => {
+  return step.files?.dynamic?.map((track) => getFrontView(track));
+});
+
+function getFrontView(track) {
+  if (track.files.length === 1) return track.files[0];
+  const xMax = parseInt(
+    track.files[track.files.length - 1].name.split("_")[1].split(".")[0]
+  );
+  const xFrontView = (xMax + 1) / 2;
+  const extension = track.files[0].name.split(".")[1];
+  const frontViewName = "0_" + xFrontView + "." + extension;
+  const frontView = track.files.find((file) => file.name === frontViewName);
+  return frontView;
+}
+</script>