2024-12-02 16:07:52 +01:00
|
|
|
<template>
|
2025-07-10 05:13:42 +02:00
|
|
|
<Card class="gap-4">
|
|
|
|
|
<ProfileHeader :header="account.header" :avatar="account.avatar" :display-name="account.display_name" />
|
|
|
|
|
<Row class="justify-end gap-2">
|
|
|
|
|
<ProfileRelationshipActions :account="account" />
|
|
|
|
|
<ProfileActions :account="account">
|
|
|
|
|
<Button variant="secondary" size="icon">
|
|
|
|
|
<Ellipsis />
|
2024-12-02 16:07:52 +01:00
|
|
|
</Button>
|
2025-07-10 05:13:42 +02:00
|
|
|
</ProfileActions>
|
|
|
|
|
</Row>
|
|
|
|
|
<Col class="justify-center">
|
|
|
|
|
<Text class="font-bold" v-render-emojis="account.emojis">
|
|
|
|
|
{{ account.display_name }}
|
|
|
|
|
</Text>
|
|
|
|
|
<Address :username="username" :domain="domain" />
|
|
|
|
|
</Col>
|
|
|
|
|
<ProfileBadges :account="account" />
|
|
|
|
|
<Html v-html="account.note" v-render-emojis="account.emojis" />
|
|
|
|
|
<Separator />
|
|
|
|
|
<ProfileFields v-if="account.fields.length > 0" :fields="account.fields" :emojis="account.emojis" />
|
|
|
|
|
<Separator v-if="account.fields.length > 0" />
|
|
|
|
|
<Row>
|
|
|
|
|
<HeadingSmall class="flex items-center gap-1">
|
|
|
|
|
<CalendarDays class="size-4" /> {{ formattedCreationDate }}
|
|
|
|
|
</HeadingSmall>
|
|
|
|
|
</Row>
|
|
|
|
|
<Separator />
|
|
|
|
|
<ProfileStats :follower-count="account.followers_count" :following-count="account.following_count"
|
|
|
|
|
:note-count="account.statuses_count" />
|
2024-12-02 16:07:52 +01:00
|
|
|
</Card>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script lang="ts" setup>
|
2025-05-26 11:19:15 +02:00
|
|
|
import type { Account } from "@versia/client/schemas";
|
2025-07-10 05:13:42 +02:00
|
|
|
import { CalendarDays, Ellipsis } from "lucide-vue-next";
|
2025-05-26 11:19:15 +02:00
|
|
|
import type { z } from "zod";
|
2024-12-02 16:07:52 +01:00
|
|
|
import { Button } from "~/components/ui/button";
|
2025-07-10 05:13:42 +02:00
|
|
|
import { Card } from "~/components/ui/card";
|
2024-12-02 16:07:52 +01:00
|
|
|
import { Separator } from "~/components/ui/separator";
|
2025-07-10 05:13:42 +02:00
|
|
|
import { getLocale } from "~/paraglide/runtime";
|
|
|
|
|
import HeadingSmall from "../typography/headings/small.vue";
|
|
|
|
|
import Html from "../typography/html.vue";
|
|
|
|
|
import Col from "../typography/layout/col.vue";
|
|
|
|
|
import Row from "../typography/layout/row.vue";
|
|
|
|
|
import Text from "../typography/text.vue";
|
|
|
|
|
import Address from "./address.vue";
|
2024-12-02 16:07:52 +01:00
|
|
|
import ProfileActions from "./profile-actions.vue";
|
2025-03-28 01:16:24 +01:00
|
|
|
import ProfileBadges from "./profile-badges.vue";
|
2024-12-02 16:07:52 +01:00
|
|
|
import ProfileFields from "./profile-fields.vue";
|
|
|
|
|
import ProfileHeader from "./profile-header.vue";
|
2025-07-10 05:13:42 +02:00
|
|
|
import ProfileRelationshipActions from "./profile-relationship-actions.vue";
|
2024-12-02 16:07:52 +01:00
|
|
|
import ProfileStats from "./profile-stats.vue";
|
|
|
|
|
|
|
|
|
|
const { account } = defineProps<{
|
2025-05-26 11:19:15 +02:00
|
|
|
account: z.infer<typeof Account>;
|
2024-12-02 16:07:52 +01:00
|
|
|
}>();
|
|
|
|
|
|
2025-07-10 05:13:42 +02:00
|
|
|
const [username, domain] = account.acct.split("@");
|
2024-12-02 16:07:52 +01:00
|
|
|
|
2025-07-10 05:13:42 +02:00
|
|
|
const formattedCreationDate = new Intl.DateTimeFormat(getLocale(), {
|
|
|
|
|
dateStyle: "long",
|
|
|
|
|
timeStyle: "short",
|
|
|
|
|
}).format(new Date(account.created_at || 0));
|
2025-03-28 01:16:24 +01:00
|
|
|
</script>
|
