45 lines
829 B
Svelte
45 lines
829 B
Svelte
<script lang="ts">
|
|
import type { MastodonAccount } from '$lib/mastoapi/account';
|
|
|
|
export let account: MastodonAccount;
|
|
</script>
|
|
|
|
<article class="account-profile">
|
|
<header>
|
|
<img class="avatar" alt={account.acct} src={account.avatar} />
|
|
<div>
|
|
<h1>{account.display_name}</h1>
|
|
<a class="link-muted" href={account.url}>@{account.fqn}</a>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="about">
|
|
{@html account.note}
|
|
</div>
|
|
</article>
|
|
|
|
<style>
|
|
.account-profile {
|
|
background: var(--col-bg-1);
|
|
padding: 1em;
|
|
}
|
|
|
|
.account-profile header {
|
|
display: flex;
|
|
flex-direction: row;
|
|
margin-bottom: 1em;
|
|
}
|
|
|
|
.account-profile header .avatar {
|
|
width: 5em;
|
|
height: 5em;
|
|
border-radius: 6px;
|
|
|
|
margin-inline-end: 1em;
|
|
}
|
|
|
|
.account-profile header > div {
|
|
width: 100%;
|
|
}
|
|
</style>
|