ressources pedagogiques

2026-06-13 20:44:47 +02:00
parent d7be7756dd
commit 29914a1041
4 changed files with 236 additions and 76 deletions
--- a/app/components/RessourcesCard.vue
+++ b/app/components/RessourcesCard.vue
@@ -25,86 +25,173 @@

    <div class="grid gap-6 p-6">
      <div class="grid gap-3">
-        <h3 class="text-xl font-extrabold leading-tight tracking-tight text-primary">
+        <h3 class="text-xl font-extrabold leading-tight tracking-tight">
          {{ title }}
        </h3>
        <p
          v-if="description"
-          class="text-sm leading-7 text-on-surface-variant"
+          class="text-sm"
        >
          {{ 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"
+      <div class="grid gap-3">
+        <template
+          v-for="action in resourceActions"
+          :key="action.id || action.label"
+        >
+          <a
+            v-if="action.url"
+            :href="action.url"
+            :download="getDownloadAttribute(action)"
+            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"
          >
-            {{ fileSize }}
-          </span>
-        </span>
+            <span class="min-w-0">
+              <span class="block truncate text-sm font-bold text-primary group-hover:text-on-primary-container">
+                {{ action.label }}
+              </span>
+              <span
+                v-if="action.size"
+                class="block text-xs text-on-surface-variant group-hover:text-on-primary-container/80"
+              >
+                {{ action.size }}
+              </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>
+            <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">{{ getActionIcon(action) }}</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"
+          <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"
          >
-            {{ 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>
+            <span>
+              <span class="block text-sm font-bold text-primary">{{ action.label }}</span>
+              <span
+                v-if="action.size"
+                class="block text-xs text-on-surface-variant"
+              >
+                {{ action.size }}
+              </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">{{ getActionIcon(action) }}</span>
+            </span>
+          </div>
+        </template>
      </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: '',
+<script setup>
+  useHead({
+    link: [
+      {
+        rel: 'preconnect',
+        href: 'https://fonts.googleapis.com',
+      },
+      {
+        rel: 'preconnect',
+        href: 'https://fonts.gstatic.com',
+        crossorigin: '',
+      },
+      {
+        rel: 'stylesheet',
+        href: 'https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap',
+      },
+      {
+        rel: 'stylesheet',
+        href: 'https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap',
+      },
+    ],
+  })
+const props = defineProps({
+  title: {
+    type: String,
+    required: true,
+  },
+  description: {
+    type: String,
+    default: '',
+  },
+  imgSrc: {
+    type: String,
+    default: '',
+  },
+  imgAlt: {
+    type: String,
+    default: '',
+  },
+  badge: {
+    type: String,
+    default: 'PDF',
+  },
+  fileLabel: {
+    type: String,
+    default: 'Outil pédagogique (PDF)',
+  },
+  fileSize: {
+    type: String,
+    default: '',
+  },
+  fileUrl: {
+    type: String,
+    default: '',
+  },
+  fileName: {
+    type: String,
+    default: '',
+  },
+  linkType: {
+    type: String,
+    default: 'file',
+    validator: (value) => ['file', 'web'].includes(value),
+  },
+  actions: {
+    type: Array,
+    default: () => [],
+  },
 })

-const downloadName = computed(() => props.fileName || true)
+const resourceActions = computed(() => {
+  if (props.actions.length) {
+    return props.actions.map((action) => ({
+      id: action.id || action.label,
+      type: action.type || 'file',
+      label: action.label || props.fileLabel,
+      size: action.size || '',
+      url: action.url || '',
+      fileName: action.fileName || '',
+    }))
+  }
+
+  return [
+    {
+      id: 'file',
+      type: props.linkType,
+      label: props.fileLabel,
+      size: props.fileSize,
+      url: props.fileUrl,
+      fileName: props.fileName,
+    },
+  ]
+})
+
+function getDownloadAttribute(action) {
+  if (action.type === 'web') return null
+
+  return action.fileName || true
+}
+
+function getActionIcon(action) {
+  return action.type === 'web' ? 'open_in_new' : 'download'
+}
 </script>

 <style lang="scss" scoped>