fetch de usuarios ya funcional junto con la ui de usurios

src/lib/components/TablaUsuarios.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+	import TableBody from '@/components/ui/table/table-body.svelte';
+	import TableCell from '@/components/ui/table/table-cell.svelte';
+	import TableHead from '@/components/ui/table/table-head.svelte';
+	import TableHeader from '@/components/ui/table/table-header.svelte';
+	import TableRow from '@/components/ui/table/table-row.svelte';
+	import Table from '@/components/ui/table/table.svelte';
+	import type { UserResponseDto } from '../../../types';
+
+	interface Props {
+		usuarios: UserResponseDto[];
+	}
+
+	let { usuarios }: Props = $props();
+</script>
+
+<Table>
+	<TableHeader>
+		<TableRow>
+			<TableHead>Usuario</TableHead>
+			<TableHead>Nombre</TableHead>
+			<TableHead>Cantidad de posts</TableHead>
+			<TableHead>Fecha de Creacion</TableHead>
+			<TableHead>Acciones</TableHead>
+		</TableRow>
+	</TableHeader>
+	<TableBody>
+		{#each usuarios as usuario}
+			<TableRow>
+				<TableCell>@{usuario.username}</TableCell>
+				<TableCell>{usuario.displayName}</TableCell>
+				<TableCell>?</TableCell>
+				<TableCell>{usuario.createdAt.replace('Z', ' ').replace('T', ' | ')}</TableCell>
+				<TableCell>?</TableCell>
+			</TableRow>
+		{/each}
+	</TableBody>
+</Table>

src/lib/components/crear-post.svelte

@@ -85,6 +85,7 @@
 						<TooltipTrigger class="*: flex">
 							<InputGroupButton
 								variant="default"
+								disabled={cargando}
 								type="submit"
 								class="transform rounded-full transition-transform ease-in hover:scale-120"
 								size="xs"

src/routes/(privado)/admin/+page.server.ts

@@ -1,9 +0,0 @@
-import { sesionStore } from '@/stores/usuario';
-import { redirect } from '@sveltejs/kit';
-import { get } from 'svelte/store';
-
-export async function load({ params }) {
-	if (get(sesionStore)?.isAdmin !== true) {
-		redirect(302, '/');
-	}
-}

src/routes/(privado)/admin/+page.svelte

@@ -1,8 +1,5 @@
 <script lang="ts">
-	import CardAction from '@/components/ui/card/card-action.svelte';
 	import CardContent from '@/components/ui/card/card-content.svelte';
-	import CardHeader from '@/components/ui/card/card-header.svelte';
-	import CardTitle from '@/components/ui/card/card-title.svelte';
 	import Card from '@/components/ui/card/card.svelte';
 	import TableBody from '@/components/ui/table/table-body.svelte';
 	import TableHead from '@/components/ui/table/table-head.svelte';
@@ -12,10 +9,11 @@
 	import type { User } from '../../../types';
 	import CardDescription from '@/components/ui/card/card-description.svelte';
 	import Spinner from '@/components/ui/spinner/spinner.svelte';
+	import TableCell from '@/components/ui/table/table-cell.svelte';
+	import { page } from '$app/state';
+	import TablaUsuarios from '@/components/TablaUsuarios.svelte';
 
-	let usuarios: User[] = $state([]);
 	let cargando = $state(true);
-	let error = $state(true);
 </script>
 
 <div class="flex min-h-fit w-full items-center justify-center p-6 md:p-10">
@@ -25,33 +23,18 @@
 		>
 			Gestion Usuarios
 		</h1>
-		<Card class={error ? 'border-red-400' : ''}>
+		<Card class={page.data.error ? 'border-red-400' : ''}>
 			<CardContent>
-				{#if usuarios.length === 0}
+				{#if page.data.usuarios.length === 0}
-					{#if error}
+					{#if page.data.error}
 						<CardDescription class="flex items-center justify-center space-x-2 text-destructive">
 							<span class="text-sm">Error al cargar usuarios.</span>
 						</CardDescription>
-					{:else if cargando}
-						<CardDescription class="flex items-center justify-center space-x-2">
-							<Spinner aria-label="Cargando usuarios" />
-							<span class="text-md text-muted-foreground">Cargando usuarios...</span>
-						</CardDescription>
 					{:else}
 						<CardDescription>No hay posts que mostar</CardDescription>
 					{/if}
 				{:else}
-					<Table>
+					<TablaUsuarios usuarios={page.data.usuarios}></TablaUsuarios>
-						<TableHeader>
-							<TableRow>
-								<TableHead>Usuario</TableHead>
-								<TableHead>Nombre</TableHead>
-								<TableHead>Cantidad de posts</TableHead>
-								<TableHead>Acciones</TableHead>
-							</TableRow>
-						</TableHeader>
-						<TableBody></TableBody>
-					</Table>
 				{/if}
 			</CardContent>
 		</Card>

src/routes/(privado)/admin/+page.ts

@@ -0,0 +1,29 @@
+import { apiBase } from '@/stores/url.js';
+import { sesionStore } from '@/stores/usuario';
+import { redirect } from '@sveltejs/kit';
+import { get } from 'svelte/store';
+import type { UserResponseDto } from '../../../types.js';
+
+//para que solo se envie cuando se requiere
+export const prerender = true;
+
+export async function load({}) {
+	const response = await fetch(get(apiBase) + '/api/admin/users', {
+		method: 'GET',
+		headers: {
+			'Content-Type': 'application/json',
+			Authorization: `Bearer ${get(sesionStore)?.accessToken}`
+		}
+	});
+
+	if (response.status === 401) {
+		throw redirect(302, '/');
+	}
+	if (!response.ok) {
+		return { error: true };
+	}
+
+	const usuarios: UserResponseDto[] = await response.json();
+
+	return { usuarios, error: false };
+}