70 lines
1.5 KiB
Vue
70 lines
1.5 KiB
Vue
<script setup lang="ts">
|
|
import { defineProps } from 'vue'
|
|
import type { User } from '../../stores/userdata'
|
|
import ProfilePicture from '@/components/user/ProfilePicture.vue'
|
|
import FormattedText from '@/components/util/FormattedText.vue'
|
|
|
|
const props = defineProps<{
|
|
user: User
|
|
}>()
|
|
</script>
|
|
<template>
|
|
<div class="account-header">
|
|
<div class="pfp-wrapper">
|
|
<ProfilePicture
|
|
class="pfp"
|
|
:size="48"
|
|
:username="props.user.username"
|
|
:media="props.user.profilePicture"
|
|
/>
|
|
</div>
|
|
<div class="account-info">
|
|
<FormattedText class="displayname" :raw-text="props.user.displayName" />
|
|
<p class="username">{{ props.user.username }}</p>
|
|
</div>
|
|
<div class="filler"/>
|
|
<!-- TODO: Distinguish this from buttons.
|
|
It is not a button. It is not clickable. It must not look like the clickable things
|
|
-->
|
|
<div class="server-wrapper">
|
|
<p class="server-name">{{props.user.server.name}}</p>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.account-header {
|
|
display: flex;
|
|
flex-direction: row;
|
|
height: 4em;
|
|
background-color: var(--accent);
|
|
padding: 0 0.6em 0.6em 0.6em;
|
|
}
|
|
|
|
.pfp {
|
|
margin-right: 1em;
|
|
}
|
|
|
|
.pfp-wrapper {
|
|
margin-top: 1em;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
}
|
|
|
|
.displayname {
|
|
font-weight: bold;
|
|
}
|
|
.username {
|
|
margin-top: -0.75em;
|
|
font-size: 0.9em;
|
|
}
|
|
.filler {
|
|
flex-grow: 1;
|
|
}
|
|
.server-name {
|
|
border: var(--text) 1px solid;
|
|
border-radius: 0.6em;
|
|
padding: 0.2em;
|
|
}
|
|
</style>
|