generated from gitea_admin/default
129 lines
3.6 KiB
Vue
129 lines
3.6 KiB
Vue
<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>
|