skeleton de la interfaz de seguidores y seguidos

src/lib/components/ui/badge/badge.svelte

@@ -0,0 +1,50 @@
+<script lang="ts" module>
+	import { type VariantProps, tv } from "tailwind-variants";
+
+	export const badgeVariants = tv({
+		base: "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden whitespace-nowrap rounded-full border px-2 py-0.5 text-xs font-medium transition-[color,box-shadow] focus-visible:ring-[3px] [&>svg]:pointer-events-none [&>svg]:size-3",
+		variants: {
+			variant: {
+				default:
+					"bg-primary text-primary-foreground [a&]:hover:bg-primary/90 border-transparent",
+				secondary:
+					"bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90 border-transparent",
+				destructive:
+					"bg-destructive [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/70 border-transparent text-white",
+				outline: "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+		},
+	});
+
+	export type BadgeVariant = VariantProps<typeof badgeVariants>["variant"];
+</script>
+
+<script lang="ts">
+	import type { HTMLAnchorAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		href,
+		class: className,
+		variant = "default",
+		children,
+		...restProps
+	}: WithElementRef<HTMLAnchorAttributes> & {
+		variant?: BadgeVariant;
+	} = $props();
+</script>
+
+<svelte:element
+	this={href ? "a" : "span"}
+	bind:this={ref}
+	data-slot="badge"
+	{href}
+	class={cn(badgeVariants({ variant }), className)}
+	{...restProps}
+>
+	{@render children?.()}
+</svelte:element>

src/lib/components/ui/badge/index.ts

@@ -0,0 +1,2 @@
+export { default as Badge } from "./badge.svelte";
+export { badgeVariants, type BadgeVariant } from "./badge.svelte";

src/lib/hooks/obtenerSeguidoresPorUsuario.ts

@@ -0,0 +1,25 @@
+import { sesionStore } from "@/stores/usuario";
+import type { UserResponseDto } from "../../types";
+import { get } from "svelte/store";
+import { apiBase } from "@/stores/url";
+
+export async function obtenerSeguidoresPorUsuario(Id: string): Promise<UserResponseDto[] | null> {
+ try {
+  const response = await fetch(`${get(apiBase)}/api/users/${Id}/followers`, {
+   method: 'GET',
+   headers: {
+    'Content-Type': 'application/json',
+    Authorization: `Bearer ${get(sesionStore)?.accessToken}`
+   }
+  });
+
+  if (!response.ok) {
+   return null;
+  }
+
+  const followers: UserResponseDto[] = await response.json();
+  return followers;
+ } catch (error) {
+  return null;
+ }
+}

src/lib/hooks/obtenerSeguidosPorUsuario.ts

@@ -0,0 +1,25 @@
+import { sesionStore } from "@/stores/usuario";
+import type { UserResponseDto } from "../../types";
+import { apiBase } from "@/stores/url";
+import { get } from "svelte/store";
+
+export async function obtenerSeguidosPorUsuario(id: string): Promise<UserResponseDto[] | null> {
+ try {
+  const response = await fetch(`${get(apiBase)}/api/users/${id}/following`, {
+   method: 'GET',
+   headers: {
+    'Content-Type': 'application/json',
+    Authorization: `Bearer ${get(sesionStore)?.accessToken}`
+   }
+  });
+
+  if (!response.ok) {
+   return null;
+  }
+
+  const users: UserResponseDto[] = await response.json();
+  return users;
+ } catch (error) {
+  return null;
+ }
+}

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

@@ -1,11 +1,15 @@
 import { obtenerUsuarioPorUsername } from '@/hooks/obtenerUsuario.js';
 import type { User, UserResponseDto } from '../../types.js';
 import { error } from '@sveltejs/kit';
+import { obtenerSeguidosPorUsuario } from '@/hooks/obtenerSeguidosPorUsuario.js';
+import { obtenerSeguidoresPorUsuario } from '@/hooks/obtenerSeguidoresPorUsuario.js';
 
 export async function load({ params }) {
-	const usuario: UserResponseDto | null = await obtenerUsuarioPorUsername(params.perfil);
-	if (usuario) {
-		return usuario;
-	}
-	error(404, 'No se encontro el usuario, ' + params.perfil);
+  const usuario: UserResponseDto | null = await obtenerUsuarioPorUsername(params.perfil);
+  if(!usuario) error(404, 'No se encontro el usuario, ' + params.perfil);
+
+  const seguidos = await obtenerSeguidosPorUsuario(usuario.id);
+  const seguidores = await obtenerSeguidoresPorUsuario(usuario.id);
+
+  return { ...usuario, seguidos, seguidores };
 }

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

@@ -22,6 +22,9 @@
 	import DialogHeader from '@/components/ui/dialog/dialog-header.svelte';
 	import DialogTitle from '@/components/ui/dialog/dialog-title.svelte';
 	import { sesionStore } from '@/stores/usuario.js';
+	import CardHeader from '@/components/ui/card/card-header.svelte';
+	import CardTitle from '@/components/ui/card/card-title.svelte';
+	import Badge from '@/components/ui/badge/badge.svelte';
 
 	let { params } = $props();
 
@@ -62,7 +65,6 @@
 
 	async function handleEditar(e: SubmitEvent) {
 		e.preventDefault();
-		//		post.content = 'test';
 		if (postAModificar == null) return;
 		await updatePost(
 			postAModificar,
@@ -76,24 +78,53 @@
 
 <div class="flex min-h-fit w-full items-center justify-center p-6 md:p-10">
 	<div class="w-full max-w-6xl">
-		<Card class="mb-2 overflow-hidden">
-			<CardContent>
-				<div class="flex justify-center">
-					<Avatar class="mt-2 scale-250 border-2 border-slate-950">
-						<AvatarImage></AvatarImage>
-						<AvatarFallback>{page.data.displayName[0].toUpperCase()}</AvatarFallback>
-					</Avatar>
-				</div>
-				<h1
-					class="mt-10 scroll-m-20 text-center text-2xl font-extrabold tracking-tight lg:text-5xl"
-				>
-					{page.data.displayName}
-				</h1>
-				<h3 class="scroll-m-20 text-center text-2xl tracking-tight text-muted-foreground">
-					@{params.perfil}
-				</h3>
-			</CardContent>
-		</Card>
+		<div class="flex gap-2">
+			<Card class="mb-2 flex w-3/4 overflow-hidden">
+				<CardContent>
+					<div class="flex justify-center">
+						<Avatar class="mt-2 scale-250 border-2 border-slate-950">
+							<AvatarImage></AvatarImage>
+							<AvatarFallback>{page.data.displayName?.[0]?.toUpperCase() || ''}</AvatarFallback>
+						</Avatar>
+					</div>
+					<h1
+						class="mt-10 scroll-m-20 text-center text-2xl font-extrabold tracking-tight lg:text-5xl"
+					>
+						{page.data.displayName}
+					</h1>
+					<h3 class="scroll-m-20 text-center text-2xl tracking-tight text-muted-foreground">
+						@{params.perfil}
+					</h3>
+					<p class="mt-4 rounded-full bg-accent p-4 text-center text-muted-foreground">
+						{page.data.bio}
+					</p>
+				</CardContent>
+			</Card>
+			<aside class="flex w-1/4 flex-col gap-2">
+				<Card class="w-full">
+					<CardContent>
+						<CardHeader class="flex justify-between">
+							<CardTitle>Seguidores:</CardTitle>
+							<Badge variant="secondary">{page.data.seguidos.length}</Badge>
+						</CardHeader>
+						<CardContent>
+							<!-- Seguidos -->
+						</CardContent>
+					</CardContent>
+				</Card>
+				<Card class="w-full">
+					<CardContent>
+						<CardHeader class="flex justify-between">
+							<CardTitle>Seguidos:</CardTitle>
+							<Badge variant="secondary">{page.data.seguidores.length}</Badge>
+						</CardHeader>
+						<CardContent>
+							<!-- Seguidores -->
+						</CardContent>
+					</CardContent>
+				</Card>
+			</aside>
+		</div>
 
 		<h1
 			class="mt-10 flex scroll-m-20 justify-between text-3xl font-extrabold tracking-tight lg:text-3xl"