Capital/pages/users/[name].vue

73 lines
2.3 KiB
Vue
Raw Normal View History

<template>
2024-09-22 14:21:16 +00:00
<v-container class="mx-auto">
2024-08-11 08:14:40 +00:00
<v-img v-if="urlOfBanner" :src="urlOfBanner" :aspect-ratio="16 / 5" class="rounded-md mb-3" cover />
2024-08-11 08:14:40 +00:00
<div class="mx-[2.5ch]">
2024-09-22 14:21:16 +00:00
<div class="my-5 mx-4 flex flex-row gap-4">
2024-08-11 08:14:40 +00:00
<v-avatar :image="urlOfAvatar" />
<div class="flex flex-col">
2024-08-16 16:04:21 +00:00
<span>{{ account?.nick }} <span class="text-xs">@{{ account?.name }}</span></span>
<span class="text-sm">{{ account?.description }}</span>
2024-08-11 08:14:40 +00:00
</div>
</div>
2024-09-22 14:21:16 +00:00
<div class="mb-7">
<v-card rounded="xl" class="mx-[-5px]">
<v-tabs
v-model="tab"
align-tabs="start"
color="primary"
hide-slider
>
<v-tab :value="1">{{ t("userActivity") }}</v-tab>
</v-tabs>
</v-card>
2024-08-11 08:14:40 +00:00
</div>
2024-09-22 14:21:16 +00:00
<v-row>
<v-col row="12" lg="8">
<post-list class="mx-[-2.5ch] mt-[-16px]" v-if="account" :author="account.name" />
</v-col>
<v-col row="12" lg="4" order="first" order-lg="last">
<div class="sticky top-0 h-fit">
<v-card prepend-icon="mdi-identifier" title="About">
<v-card-text>
<p><b>Description</b></p>
<p>{{ account.description }}</p>
<p class="mt-3"><b>Joined At</b></p>
<p>{{ new Date(account.created_at).toLocaleString() }}</p>
</v-card-text>
</v-card>
</div>
</v-col>
</v-row>
</div>
2024-08-11 08:14:40 +00:00
</v-container>
</template>
<script setup lang="ts">
2024-08-11 14:26:29 +00:00
definePageMeta({
alias: ["/@:name(.*)*"],
2024-08-11 14:26:29 +00:00
})
const { t } = useI18n()
2024-08-11 08:14:40 +00:00
const route = useRoute()
const config = useRuntimeConfig()
2024-09-22 14:21:16 +00:00
const tab = ref(1)
const { data: account } = await useFetch<any>(`${config.public.solarNetworkApi}/cgi/id/users/${route.params.name}`)
2024-08-16 16:04:21 +00:00
if (account.value == null) {
throw createError({
statusCode: 404,
statusMessage: "User Not Found",
})
}
const urlOfAvatar = computed(() => account.value?.avatar ? `${config.public.solarNetworkApi}/cgi/uc/attachments/${account.value.avatar}` : void 0)
const urlOfBanner = computed(() => account.value?.banner ? `${config.public.solarNetworkApi}/cgi/uc/attachments/${account.value.banner}` : void 0)
2024-08-11 08:14:40 +00:00
const externalOpenLink = computed(() => `${config.public.solianUrl}/accounts/view/${route.params.name}`)
</script>