sam
74222ead45
i don't actually know what the license on the kitten image is, and while it's very unlikely, i don't want to get into legal trouble. it was only ever supposed to be a temporary image, too. identicons aren't the prettiest but at least they have a clear license :3
70 lines
1.7 KiB
Svelte
70 lines
1.7 KiB
Svelte
<script lang="ts">
|
|
import type { User, Member } from "$api/models";
|
|
import { t } from "$lib/i18n";
|
|
import { renderMarkdown } from "$lib/markdown";
|
|
import ProfileLink from "./ProfileLink.svelte";
|
|
import ProfileFlag from "./ProfileFlag.svelte";
|
|
import Avatar from "$components/Avatar.svelte";
|
|
|
|
type Props = {
|
|
name: string;
|
|
profile: User | Member;
|
|
lazyLoadAvatar?: boolean;
|
|
};
|
|
|
|
let { name, profile, lazyLoadAvatar }: Props = $props();
|
|
|
|
// renderMarkdown sanitizes the output HTML for us
|
|
let bio = $derived(renderMarkdown(profile.bio));
|
|
</script>
|
|
|
|
<div class="grid row-gap-3">
|
|
<div class="row">
|
|
<div class="col-md-4 text-center">
|
|
<Avatar
|
|
name={"name" in profile ? profile.name : profile.username}
|
|
url={profile.avatar_url}
|
|
alt={$t("avatar-tooltip", { name })}
|
|
lazyLoad={lazyLoadAvatar}
|
|
/>
|
|
<!-- Flags show up below the avatar if the profile has a bio, otherwise they show up below the row entirely -->
|
|
{#if profile.flags && profile.bio}
|
|
<div class="d-flex flex-wrap m-4">
|
|
{#each profile.flags as flag}
|
|
<ProfileFlag {flag} />
|
|
{/each}
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
<div class="col-md">
|
|
{#if profile.display_name}
|
|
<div>
|
|
<h2>{profile.display_name}</h2>
|
|
<p class="fs-5 text-body-secondary">{name}</p>
|
|
</div>
|
|
{:else}
|
|
<h2>{name}</h2>
|
|
{/if}
|
|
{#if bio}
|
|
<hr />
|
|
<p>{@html bio}</p>
|
|
{/if}
|
|
</div>
|
|
{#if profile.links.length > 0}
|
|
<div class="col-md d-flex align-items-center">
|
|
<ul class="list-unstyled">
|
|
{#each profile.links as link}
|
|
<ProfileLink {link} />
|
|
{/each}
|
|
</ul>
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
{#if profile.flags && !profile.bio}
|
|
<div class="d-flex flex-wrap m-4">
|
|
{#each profile.flags as flag}
|
|
<ProfileFlag {flag} />
|
|
{/each}
|
|
</div>
|
|
{/if}
|