frontend/components/profiles/profile-header.vue
2024-12-03 14:07:00 +01:00

23 lines
799 B
Vue

<template>
<CardHeader class="p-0 relative">
<div class="bg-muted rounded overflow-hidden h-48 md:h-72 w-full">
<img :src="header" alt="" class="object-cover w-full h-full" />
<!-- Shadow overlay at the bottom -->
<div class="absolute bottom-0 w-full h-1/3 bg-gradient-to-b from-black/0 to-black/40"></div>
</div>
<div class="absolute bottom-0 translate-y-1/3 left-4 flex flex-row items-start gap-2">
<Avatar size="lg" class="border" :src="avatar" :name="displayName" />
</div>
</CardHeader>
</template>
<script lang="ts" setup>
import { CardHeader } from "~/components/ui/card";
import Avatar from "./avatar.vue";
defineProps<{
header: string;
avatar: string;
displayName: string;
}>();
</script>