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

actualizada interfaz de seguidos y seguidores

Browse Source
This commit is contained in:
fedpo
2026-01-08 17:32:50 -03:00
parent b69e2f19ab
commit 0e924bfc31
4 changed files with 93 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,5 +1,6 @@
<script lang="ts">
import Pen from '@lucide/svelte/icons/pen';
import ArrowRight from '@lucide/svelte/icons/chevron-right';
import AvatarFallback from './ui/avatar/avatar-fallback.svelte';
import AvatarImage from './ui/avatar/avatar-image.svelte';
import Avatar from './ui/avatar/avatar.svelte';
@@ -139,24 +140,29 @@
<CardHeader class="flex justify-between">
<CardTitle>Seguidos:</CardTitle>
{#if Array.isArray(data?.seguidos?.response)}
<Badge variant="secondary">{data.seguidos.response.length || 0}</Badge>
<Badge variant="secondary">{data.countSeguidos || 0}</Badge>
{/if}
</CardHeader>
<CardContent>
{#if (data.seguidos.response?.length || 0) === 0}
<h3>No hay Seguidos</h3>
{:else}
<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>
{/each}
<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>
{/each}
</div>
{#if data.seguidos.response?.length < data.countSeguidos}
<Button variant="ghost" class="mt-1 ml-4">Ver más<ArrowRight /></Button>
{/if}
</div>
{/if}
</CardContent>
@@ -167,24 +173,29 @@
<CardHeader class="flex justify-between">
<CardTitle>Seguidores:</CardTitle>
{#if Array.isArray(data?.seguidores?.response)}
<Badge variant="secondary">{data.seguidores.response.length || 0}</Badge>
<Badge variant="secondary">{data.countSeguidores || 0}</Badge>
{/if}
</CardHeader>
<CardContent>
{#if (data.seguidores.response?.length || 0) === 0}
<h3>No hay Seguidores</h3>
{:else}
<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>
{/each}
<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>
{/each}
</div>
{#if data.seguidores.response?.length < data.countSeguidores}
<Button variant="ghost" class="mt-1 ml-4">Ver más<ArrowRight /></Button>
{/if}
</div>
{/if}
</CardContent>