57 lines
1.8 KiB
Vue
Executable File
57 lines
1.8 KiB
Vue
Executable File
<template>
|
|
<div>
|
|
<div class="gradient-profile relative border-b border-indigo-300">
|
|
<user-banner class="h-24 xl:h-40 bg-indigo-200" :user="user"
|
|
size="hero"
|
|
/>
|
|
</div>
|
|
|
|
<div class="-mt-14 xl:-mt-24 relative xl:container xl:mx-auto px-5 xl:px-10">
|
|
<div class="flex flex-col md:flex-row">
|
|
<div class="flex-shrink-0 self-center md:self-start md:mr-6 2xl:mr-10">
|
|
<user-avatar :user="user" size="medium"
|
|
class="shadow-classic object-cover w-28 h-28 text-xl xl:w-48 xl:h-48 xl:text-3xl"
|
|
/>
|
|
</div>
|
|
<div class="w-full">
|
|
<div class="h-12 xl:h-24 hidden md:block"></div>
|
|
<div class="mt-2 ">
|
|
<div class="-mx-2 -my-2 lg:-mx-4 lg:-my-4 flex flex-col md:flex-row flex-wrap xl:flex-nowrap justify-between">
|
|
<div class="max-w-[300px] text-center md:text-left mx-2 my-2 lg:mx-4 lg:my-4 flex flex-shrink-0 flex-col self-center md:self-start">
|
|
<inertia-link :href="route('profile.user', user.username)" class="text-lg xl:text-2xl block font-semibold text-white">
|
|
{{ user.name }}
|
|
</inertia-link>
|
|
<h2 class="text-sm xl:text-base text-gray-light">
|
|
@{{ user.username }}
|
|
</h2>
|
|
</div>
|
|
<div class="mx-2 my-2 lg:mx-4 lg:my-4 flex flex-col items-end">
|
|
<slot name="menu" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import UserAvatar from '@/Shared/Misc/UserAvatar.vue'
|
|
import UserBanner from '@/Shared/Misc/UserBanner.vue'
|
|
|
|
export default {
|
|
components:{
|
|
UserAvatar,
|
|
UserBanner
|
|
},
|
|
props: {
|
|
user: {
|
|
type: Object,
|
|
default: () => {}
|
|
}
|
|
}
|
|
}
|
|
|
|
</script>
|