academie

2026-06-13 00:01:15 +02:00
parent 3237b22047
commit 81918ee377
9 changed files with 278 additions and 7 deletions
--- a/app/components/RessourcesCard.vue
+++ b/app/components/RessourcesCard.vue
@@ -0,0 +1,128 @@
+<template>
+  <article class="ressources-card bg-surface-container-lowest border border-outline-variant/10 rounded-xl overflow-hidden shadow-sm transition-shadow hover:shadow-xl">
+    <div class="ressources-card__media bg-surface-container-low">
+      <img
+        v-if="imgSrc"
+        :src="imgSrc"
+        :alt="imgAlt || title"
+        class="h-full w-full object-cover"
+      >
+      <div
+        v-else
+        class="flex h-full w-full items-center justify-center bg-surface-container-low text-outline"
+        aria-hidden="true"
+      >
+        <span class="material-symbols-outlined text-5xl">image</span>
+      </div>
+
+      <span
+        v-if="badge"
+        class="absolute left-3 top-3 rounded-md bg-surface px-2.5 py-1 text-xs font-extrabold uppercase text-error shadow-sm"
+      >
+        {{ badge }}
+      </span>
+    </div>
+
+    <div class="grid gap-6 p-6">
+      <div class="grid gap-3">
+        <h3 class="text-xl font-extrabold leading-tight tracking-tight text-primary">
+          {{ title }}
+        </h3>
+        <p
+          v-if="description"
+          class="text-sm leading-7 text-on-surface-variant"
+        >
+          {{ description }}
+        </p>
+      </div>
+
+      <a
+        v-if="fileUrl"
+        :href="fileUrl"
+        :download="downloadName"
+        class="group flex items-center justify-between gap-4 rounded-lg border border-outline-variant/30 bg-surface-container-low px-4 py-3 text-on-surface transition-colors hover:bg-primary-container"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        <span class="min-w-0">
+          <span class="block truncate text-sm font-bold text-primary group-hover:text-on-primary-container">
+            {{ fileLabel }}
+          </span>
+          <span
+            v-if="fileSize"
+            class="block text-xs text-on-surface-variant group-hover:text-on-primary-container/80"
+          >
+            {{ fileSize }}
+          </span>
+        </span>
+
+        <span class="grid h-9 w-9 shrink-0 place-items-center rounded-full bg-primary-container text-primary transition-colors group-hover:bg-primary group-hover:text-on-primary">
+          <span class="material-symbols-outlined text-xl">download</span>
+        </span>
+      </a>
+
+      <div
+        v-else
+        class="flex items-center justify-between gap-4 rounded-lg border border-outline-variant/30 bg-surface-container-low px-4 py-3 text-on-surface opacity-70"
+      >
+        <span>
+          <span class="block text-sm font-bold text-primary">{{ fileLabel }}</span>
+          <span
+            v-if="fileSize"
+            class="block text-xs text-on-surface-variant"
+          >
+            {{ fileSize }}
+          </span>
+        </span>
+        <span class="grid h-9 w-9 shrink-0 place-items-center rounded-full bg-surface-container text-outline">
+          <span class="material-symbols-outlined text-xl">download</span>
+        </span>
+      </div>
+    </div>
+  </article>
+</template>
+
+<script lang="ts" setup>
+const props = withDefaults(defineProps<{
+  title: string
+  description?: string
+  imgSrc?: string
+  imgAlt?: string
+  badge?: string
+  fileLabel?: string
+  fileSize?: string
+  fileUrl?: string
+  fileName?: string
+}>(), {
+  description: '',
+  imgSrc: '',
+  imgAlt: '',
+  badge: 'PDF',
+  fileLabel: 'Fiche pédagogique (PDF)',
+  fileSize: '',
+  fileUrl: '',
+  fileName: '',
+})
+
+const downloadName = computed(() => props.fileName || true)
+</script>
+
+<style lang="scss" scoped>
+.ressources-card {
+  max-width: 392px;
+  font-family: 'Inter', sans-serif;
+}
+
+.ressources-card__media {
+  position: relative;
+  aspect-ratio: 392 / 200;
+}
+
+.material-symbols-outlined {
+  font-variation-settings:
+    'FILL' 0,
+    'wght' 400,
+    'GRAD' 0,
+    'opsz' 24;
+}
+</style>