versia-pub/frontend
2
0
Fork 0
mirror of https://github.com/versia-pub/frontend.git synced 2026-03-13 03:29:16 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor: ♻️ Refactor Avatar usage into a single component

Browse source
This commit is contained in:
Jesse Wierzbinski 2024-12-03 14:07:00 +01:00
parent caf4759d74
commit a7c8477efe
No known key found for this signature in database
9 changed files with 52 additions and 46 deletions
Download patch file Download diff file Expand all files Collapse all files

11
components/notes/header.vue
View file

@ -1,14 +1,8 @@
<template>
<div class="rounded flex flex-row items-center gap-3">
<NuxtLink :href="urlAsPath" :class="cn('relative size-14', smallLayout && 'size-8')">
<Avatar shape="square" :class="cn('size-14 border border-card', smallLayout && 'size-8')">
<AvatarImage :src="avatar" alt="" />
<AvatarFallback class="rounded-lg"> AA </AvatarFallback>
</Avatar>
<Avatar shape="square" v-if="cornerAvatar" class="size-6 border absolute -bottom-1 -right-1">
<AvatarImage :src="cornerAvatar" alt="" />
<AvatarFallback class="rounded-lg"> AA </AvatarFallback>
</Avatar>
<Avatar :class="cn('size-14 border border-card', smallLayout && 'size-8')" :src="avatar" :name="displayName" />
<Avatar v-if="cornerAvatar" class="size-6 border absolute -bottom-1 -right-1" :src="cornerAvatar" />
</NuxtLink>
<div :class="cn('flex flex-col gap-0.5 justify-center flex-1 text-left leading-tight', smallLayout && 'text-sm')">
<span class="truncate font-semibold" v-render-emojis="emojis">{{
@ -43,6 +37,7 @@ import type {
} from "@vueuse/core";
import { AtSign, Globe, Lock, LockOpen } from "lucide-vue-next";
import CopyableText from "./copyable-text.vue";
import Avatar from "../profiles/avatar.vue";
const { acct, createdAt, url, noteUrl } = defineProps<{
avatar: string;

7
components/notes/reblog-header.vue
View file

@ -1,19 +1,16 @@
<template>
<NuxtLink :href="urlAsPath" class="rounded border hover:bg-muted duration-100 text-sm flex flex-row items-center gap-2 px-2 py-1 mb-4">
<Repeat class="size-4 text-primary" />
<Avatar shape="square" class="size-6 border">
<AvatarImage :src="avatar" alt="" />
<AvatarFallback class="rounded-lg"> AA </AvatarFallback>
</Avatar>
<Avatar class="size-6 border" :src="avatar" :name="displayName" />
<span class="font-semibold" v-render-emojis="emojis">{{ displayName }}</span>
reblogged
</NuxtLink>
</template>
<script lang="ts" setup>
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import type { Emoji } from "@versia/client/types";
import { Repeat } from "lucide-vue-next";
import Avatar from "../profiles/avatar.vue";
const { url } = defineProps<{
avatar: string;