46 lines
1.3 KiB
Vue
46 lines
1.3 KiB
Vue
<script setup lang="ts">
|
|
withDefaults(defineProps<{
|
|
to: string;
|
|
fullName: string;
|
|
avatarSrc?: string;
|
|
initials?: string;
|
|
metaLabel?: string;
|
|
metaValue?: string;
|
|
}>(), {
|
|
avatarSrc: '',
|
|
initials: 'FR',
|
|
metaLabel: '',
|
|
metaValue: '',
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<NuxtLink
|
|
:to="to"
|
|
class="surface-card surface-card-interactive flex flex-col items-center rounded-[32px] p-6 text-center"
|
|
>
|
|
<img
|
|
v-if="avatarSrc"
|
|
:src="avatarSrc"
|
|
:alt="fullName"
|
|
class="h-24 w-24 rounded-[32px] object-cover shadow-[0_12px_30px_rgba(18,56,36,0.14)]"
|
|
>
|
|
<div
|
|
v-else
|
|
class="flex h-24 w-24 items-center justify-center rounded-[32px] bg-[linear-gradient(135deg,#dff7e9_0%,#c2ead3_100%)] text-3xl font-black text-[#123824] shadow-[inset_0_1px_0_rgba(255,255,255,0.65)]"
|
|
>
|
|
{{ initials }}
|
|
</div>
|
|
|
|
<h2 class="mt-8 text-lg font-bold leading-tight text-[#123824]">{{ fullName }}</h2>
|
|
|
|
<div
|
|
v-if="metaValue"
|
|
class="mt-4 inline-flex flex-wrap items-center justify-center gap-2 rounded-full border border-[#e1c15a] bg-[#fff8dc] px-4 py-2 text-sm text-[#7a5b00]"
|
|
>
|
|
<span v-if="metaLabel" class="font-semibold">{{ metaLabel }}</span>
|
|
<span class="font-bold text-[#123824]">{{ metaValue }}</span>
|
|
</div>
|
|
</NuxtLink>
|
|
</template>
|