refactor: ♻️ Refactor Avatar usage into a single component

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

View file

@ -1,10 +1,7 @@
<template>
<div v-if="relationship?.requested_by !== false" class="flex flex-row items-center gap-3 p-4">
<NuxtLink :href="followerUrl" class="relative size-10">
<Avatar shape="square" class="size-10 border border-border">
<AvatarImage :src="follower.avatar" alt="" />
<AvatarFallback class="rounded-lg"> AA </AvatarFallback>
</Avatar>
<Avatar class="size-10 border border-border" :src="follower.avatar" :name="follower.display_name" />
</NuxtLink>
<div class="flex flex-col gap-0.5 justify-center flex-1 text-left leading-tight text-sm">
<span class="truncate font-semibold" v-render-emojis="follower.emojis">{{
@ -44,8 +41,8 @@ import type { Account } from "@versia/client/types";
import { Check, Loader, X } from "lucide-vue-next";
import { toast } from "vue-sonner";
import CopyableText from "~/components/notes/copyable-text.vue";
import { Avatar, AvatarFallback, AvatarImage } from "~/components/ui/avatar";
import { Button } from "~/components/ui/button";
import Avatar from "../profiles/avatar.vue";
const { follower } = defineProps<{
follower: Account;

View file

@ -6,10 +6,7 @@
<CardHeader v-if="notification.account"
class="flex-row items-center gap-2 px-4 py-2 border-b border-border">
<component :is="icon" class="size-5 shrink-0" />
<Avatar shape="square" class="size-6 border border-card">
<AvatarImage :src="notification.account.avatar" alt="" />
<AvatarFallback> AA </AvatarFallback>
</Avatar>
<Avatar class="size-6 border border-card" :src="notification.account.avatar" :name="notification.account.display_name" />
<span class="font-semibold" v-render-emojis="notification.account.emojis">{{
notification.account.display_name
}}</span>
@ -46,7 +43,7 @@ import {
UserCheck,
UserPlus,
} from "lucide-vue-next";
import { Avatar, AvatarFallback, AvatarImage } from "~/components/ui/avatar";
import Avatar from "../profiles/avatar.vue";
import { Button } from "~/components/ui/button";
import { Card, CardContent, CardHeader } from "~/components/ui/card";
import {