finish physical sample step

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>