2024-12-04 12:47:17 +01:00
|
|
|
<template>
|
|
|
|
|
<div class="relative">
|
|
|
|
|
<div class="bg-muted rounded overflow-hidden h-32 w-full">
|
2025-03-28 01:16:24 +01:00
|
|
|
<img
|
|
|
|
|
:src="account.header"
|
|
|
|
|
alt=""
|
|
|
|
|
class="object-cover w-full h-full"
|
|
|
|
|
/>
|
2024-12-04 12:47:17 +01:00
|
|
|
<!-- Shadow overlay at the bottom -->
|
2025-03-28 01:16:24 +01:00
|
|
|
<div
|
|
|
|
|
class="absolute bottom-0 w-full h-1/3 bg-gradient-to-b from-black/0 to-black/40"
|
|
|
|
|
></div>
|
2024-12-04 12:47:17 +01:00
|
|
|
</div>
|
2025-03-28 01:16:24 +01:00
|
|
|
<div
|
|
|
|
|
class="absolute bottom-0 left-1/2 translate-y-1/3 -translate-x-1/2 flex flex-row items-start gap-2"
|
|
|
|
|
>
|
|
|
|
|
<Avatar
|
|
|
|
|
size="base"
|
|
|
|
|
class="border"
|
|
|
|
|
:src="account.avatar"
|
|
|
|
|
:name="account.display_name"
|
|
|
|
|
/>
|
2024-12-04 12:47:17 +01:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="flex flex-col justify-center items-center mt-8">
|
2025-07-10 05:13:42 +02:00
|
|
|
<Text class="font-bold" v-render-emojis="account.emojis">
|
2024-12-04 12:47:17 +01:00
|
|
|
{{ account.display_name }}
|
2025-07-10 05:13:42 +02:00
|
|
|
</Text>
|
|
|
|
|
<Address :username="username" :domain="domain" />
|
2024-12-04 12:47:17 +01:00
|
|
|
</div>
|
2025-07-10 05:13:42 +02:00
|
|
|
<Html
|
|
|
|
|
v-html="account.note"
|
|
|
|
|
v-render-emojis="account.emojis"
|
2025-03-28 01:16:24 +01:00
|
|
|
class="mt-4 max-h-72 overflow-y-auto"
|
|
|
|
|
/>
|
2024-12-04 12:47:17 +01:00
|
|
|
<Separator v-if="account.fields.length > 0" class="mt-4" />
|
2025-03-28 01:16:24 +01:00
|
|
|
<ProfileFields
|
|
|
|
|
v-if="account.fields.length > 0"
|
|
|
|
|
:fields="account.fields"
|
|
|
|
|
:emojis="account.emojis"
|
|
|
|
|
class="mt-4 max-h-48 overflow-y-auto"
|
|
|
|
|
/>
|
2024-12-04 12:47:17 +01:00
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script lang="ts" setup>
|
2025-05-26 11:19:15 +02:00
|
|
|
import type { Account } from "@versia/client/schemas";
|
|
|
|
|
import type { z } from "zod";
|
2025-03-28 01:16:24 +01:00
|
|
|
import { Separator } from "~/components/ui/separator";
|
2025-07-10 05:13:42 +02:00
|
|
|
import Html from "../typography/html.vue";
|
|
|
|
|
import Text from "../typography/text.vue";
|
|
|
|
|
import Address from "./address.vue";
|
2024-12-04 12:47:17 +01:00
|
|
|
import Avatar from "./avatar.vue";
|
|
|
|
|
import ProfileFields from "./profile-fields.vue";
|
|
|
|
|
|
|
|
|
|
const { account } = defineProps<{
|
2025-05-26 11:19:15 +02:00
|
|
|
account: z.infer<typeof Account>;
|
2024-12-04 12:47:17 +01:00
|
|
|
}>();
|
|
|
|
|
|
2025-07-10 05:13:42 +02:00
|
|
|
const [username, domain] = account.acct.split("@");
|
2025-03-28 01:16:24 +01:00
|
|
|
</script>
|
