añadidas paginas de seguidos y seguidores

src/lib/components/CardPerfil.svelte

@@ -16,6 +16,7 @@
 	import CardTitle from './ui/card/card-title.svelte';
 	import Badge from './ui/badge/badge.svelte';
 	import { resolve } from '$app/paths';
+	import { goto } from '$app/navigation';
 
 	let { data = $bindable() } = $props();
 
@@ -161,7 +162,11 @@
 									{/each}
 								</div>
 								{#if data.seguidos.response?.length < data.countSeguidos}
-									<Button variant="ghost" class="mt-1 ml-4">Ver más<ArrowRight /></Button>
+									<Button variant="ghost" class="mt-1 ml-4">
+										<a href="/{data.username}/seguidos" class="flex items-center gap-2">
+											Ver más<ArrowRight />
+										</a>
+									</Button>
 								{/if}
 							</div>
 						{/if}
@@ -194,7 +199,15 @@
 									{/each}
 								</div>
 								{#if data.seguidores.response?.length < data.countSeguidores}
-									<Button variant="ghost" class="mt-1 ml-4">Ver más<ArrowRight /></Button>
+									<Button
+										variant="ghost"
+										onclick={() => goto(`/${data.username}/seguidores`)}
+										class="mt-1 ml-4"
+									>
+										<a href="/{data.username}/seguidores" class="flex items-center gap-2">
+											Ver más<ArrowRight />
+										</a>
+									</Button>
 								{/if}
 							</div>
 						{/if}

src/lib/components/UserCard.svelte

@@ -18,7 +18,7 @@
 	let { usu }: Props = $props();
 </script>
 
-<Card class="w-[50%]">
+<Card>
 	<CardContent>
 		<div class="flex justify-between">
 			<a class="flex items-center gap-2" href={resolve(`/${usu.username}`)}>

src/routes/[perfil]/seguidores/+page.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+	import ArrowLeft from '@lucide/svelte/icons/chevron-left';
+	import type { UserResponseDto } from '../../../types';
+	import UserCard from '@/components/UserCard.svelte';
+	import { goto } from '$app/navigation';
+
+	type Data = {
+		usuario: UserResponseDto;
+		seguidores: UserResponseDto[];
+	};
+
+	let { data }: { data: Data } = $props();
+</script>
+
+<div class="flex min-h-fit w-full items-center justify-center p-6 md:p-10">
+	<div class="w-full max-w-6xl">
+		<div class="mb-4 flex items-center justify-between gap-2 rounded-md border bg-card p-2">
+			<p class="text-2xl">
+				Seguidores de @{data.usuario.username}
+			</p>
+			<button
+				class="rounded-full p-2 hover:bg-accent"
+				onclick={() => goto(`/${data.usuario.username}`)}
+			>
+				<ArrowLeft />
+			</button>
+		</div>
+		{#if data.seguidores.length === 0}
+			<div class="py-8 text-center text-muted-foreground">
+				<p>No hay seguidores para mostrar.</p>
+			</div>
+		{:else}
+			<div class="flex flex-col sm:grid" style="grid-template-columns: repeat(2, 1fr); gap: 1rem;">
+				{#each data.seguidores as follower (follower.id)}
+					<div class="h-fit">
+						<UserCard usu={follower} />
+					</div>
+				{/each}
+			</div>
+		{/if}
+	</div>
+</div>

src/routes/[perfil]/seguidores/+page.ts

@@ -0,0 +1,20 @@
+import { obtenerSeguidoresPorUsuario } from '@/hooks/obtenerSeguidoresPorUsuario';
+import { obtenerUsuarioPorUsername } from '@/hooks/obtenerUsuario';
+import { error } from '@sveltejs/kit';
+import type { UserResponseDto, UsersResponseDto } from '../../../types';
+
+export async function load({ params, fetch }) {
+	const usuario: UserResponseDto | null = await obtenerUsuarioPorUsername(params.perfil, fetch);
+	if (!usuario) error(404, 'No se encontro el usuario, ' + params.perfil);
+
+	const seguidoresResponse: UsersResponseDto | null = await obtenerSeguidoresPorUsuario(
+		usuario.id,
+		100,
+		fetch
+	);
+
+	return {
+		usuario,
+		seguidores: seguidoresResponse?.response || []
+	};
+}

src/routes/[perfil]/seguidos/+page.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+	import ArrowLeft from '@lucide/svelte/icons/chevron-left';
+	import type { UserResponseDto } from '../../../types';
+	import UserCard from '@/components/UserCard.svelte';
+	import { goto } from '$app/navigation';
+
+	type Data = {
+		usuario: UserResponseDto;
+		seguidos: UserResponseDto[];
+	};
+
+	let { data }: { data: Data } = $props();
+</script>
+
+<div class="flex min-h-fit w-full items-center justify-center p-6 md:p-10">
+	<div class="w-full max-w-6xl">
+		<div class="mb-4 flex items-center justify-between gap-2 rounded-md border bg-card p-2">
+			<p class="text-2xl">
+				Seguidos de @{data.usuario.username}
+			</p>
+			<button
+				class="rounded-full p-2 hover:bg-accent"
+				onclick={() => goto(`/${data.usuario.username}`)}
+			>
+				<ArrowLeft />
+			</button>
+		</div>
+		{#if data.seguidos.length === 0}
+			<div class="py-8 text-center text-muted-foreground">
+				<p>No hay seguidos para mostrar.</p>
+			</div>
+		{:else}
+			<div class="flex flex-col sm:grid" style="grid-template-columns: repeat(2, 1fr); gap: 1rem;">
+				{#each data.seguidos as follower (follower.id)}
+					<div class="h-fit">
+						<UserCard usu={follower} />
+					</div>
+				{/each}
+			</div>
+		{/if}
+	</div>
+</div>

src/routes/[perfil]/seguidos/+page.ts

@@ -0,0 +1,20 @@
+import { obtenerUsuarioPorUsername } from '@/hooks/obtenerUsuario';
+import { error } from '@sveltejs/kit';
+import type { UserResponseDto, UsersResponseDto } from '../../../types';
+import { obtenerSeguidosPorUsuario } from '@/hooks/obtenerSeguidosPorUsuario';
+
+export async function load({ params, fetch }) {
+	const usuario: UserResponseDto | null = await obtenerUsuarioPorUsername(params.perfil, fetch);
+	if (!usuario) error(404, 'No se encontro el usuario, ' + params.perfil);
+
+	const seguidosResponse: UsersResponseDto | null = await obtenerSeguidosPorUsuario(
+		usuario.id,
+		100,
+		fetch
+	);
+
+	return {
+		usuario,
+		seguidos: seguidosResponse?.response || []
+	};
+}