fede/minix-front
1
0
Fork 0
mirror of https://github.com/emailerfacu-spec/minix-front.git synced 2026-04-01 13:10:44 -03:00
Code Issues Packages Projects Releases Wiki Activity

Añadidos tooltips para los seguidos y seguidores del panel de perfil

Browse Source
This commit is contained in:
fedpo
2026-01-15 17:48:22 -03:00
parent 30599cb891
commit 4a7947e34a
1 changed files with 51 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
src/lib/components/CardPerfil.svelte
View File

@@ -17,6 +17,9 @@
import Badge from './ui/badge/badge.svelte';
import { resolve } from '$app/paths';
import { goto } from '$app/navigation';
import { Tooltip } from './ui/tooltip';
import TooltipTrigger from './ui/tooltip/tooltip-trigger.svelte';
import TooltipContent from './ui/tooltip/tooltip-content.svelte';
let { data = $bindable() } = $props();
@@ -151,14 +154,30 @@
<div class="flex items-center justify-between">
<div class="flex -space-x-2">
{#each data.seguidos.response as seguidos (seguidos.id)}
<a href={resolve('/[perfil]', { perfil: seguidos.username })}>
<Avatar class="h-8 w-8 border-2 border-background">
<AvatarImage src={seguidos.imageUrl} alt={seguidos.username} />
<AvatarFallback class="text-xs">
{seguidos.displayName?.[0] || ''}
</AvatarFallback>
</Avatar>
</a>
<Tooltip>
<TooltipTrigger>
<a href={resolve('/[perfil]', { perfil: seguidos.username })}>
<Avatar class="h-8 w-8 border-2 border-background">
<AvatarImage src={seguidos.imageUrl} alt={seguidos.username} />
<AvatarFallback class="text-xs">
{seguidos.displayName?.[0] || ''}
</AvatarFallback>
</Avatar>
</a>
</TooltipTrigger>
<TooltipContent>
<span class="flex items-center gap-2">
<Avatar class="h-8 w-8 border-2 border-background">
<AvatarImage src={seguidos.imageUrl} alt={seguidos.username} />
<AvatarFallback class="text-xs">
{seguidos.displayName?.[0] || ''}
</AvatarFallback>
</Avatar>
<span class="text-lg">{seguidos.displayName}</span>
<span class="text-lg text-muted-foreground">@{seguidos.username}</span>
</span>
</TooltipContent>
</Tooltip>
{/each}
</div>
{#if data.seguidos.response?.length < data.countSeguidos}
@@ -188,14 +207,30 @@
<div class="flex items-center justify-between">
<div class="flex -space-x-2">
{#each data.seguidores.response as seguidores (seguidores.id)}
<a href={resolve('/[perfil]', { perfil: seguidores.username })}>
<Avatar class="h-8 w-8 border-2 border-background">
<AvatarImage src={seguidores.imageUrl} alt={seguidores.username} />
<AvatarFallback class="text-xs">
{seguidores.displayName?.[0] || ''}
</AvatarFallback>
</Avatar>
</a>
<Tooltip>
<TooltipTrigger>
<a href={resolve('/[perfil]', { perfil: seguidores.username })}>
<Avatar class="h-8 w-8 border-2 border-background">
<AvatarImage src={seguidores.imageUrl} alt={seguidores.username} />
<AvatarFallback class="text-xs">
{seguidores.displayName?.[0] || ''}
</AvatarFallback>
</Avatar>
</a>
</TooltipTrigger>
<TooltipContent>
<span class="flex items-center gap-2">
<Avatar class="h-8 w-8 border-2 border-background">
<AvatarImage src={seguidores.imageUrl} alt={seguidores.username} />
<AvatarFallback class="text-xs">
{seguidores.displayName?.[0] || ''}
</AvatarFallback>
</Avatar>
<span class="text-lg">{seguidores.displayName}</span>
<span class="text-lg text-muted-foreground">@{seguidores.username}</span>
</span>
</TooltipContent>
</Tooltip>
{/each}
</div>
{#if data.seguidores.response?.length < data.countSeguidores}