44 lines
707 B
Vue
44 lines
707 B
Vue
|
<template>
|
||
|
|
<div class="profile">
|
||
|
|
<div class="profile-header">
|
||
|
|
<img
|
||
|
|
v-if="profile.avatar"
|
||
|
|
:src="profile.avatar"
|
||
|
|
class="avatar"
|
||
|
|
>
|
||
|
|
|
||
|
|
<h2 class="username">{{ profile.username }}</h2>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
import { inject } from 'vue';
|
||
|
|
|
||
|
|
const pageContext = inject('pageContext');
|
||
|
|
const profile = pageContext.pageProps.profile;
|
||
|
|
|
||
|
|
console.log('profile', profile);
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.profile-header {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
padding: .5rem 1rem;
|
||
|
|
color: var(--highlight-strong-30);
|
||
|
|
background: var(--grey-dark-40);
|
||
|
|
}
|
||
|
|
|
||
|
|
.username {
|
||
|
|
margin: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.avatar {
|
||
|
|
width: 2rem;
|
||
|
|
height: 2rem;
|
||
|
|
border-radius: .25rem;
|
||
|
|
margin-right: 1rem;
|
||
|
|
}
|
||
|
|
</style>
|