hecha la pagina de busqueda

src/lib/components/UserCard.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+	import { resolve } from '$app/paths';
+	import type { UserResponseDto } from '../../types';
+	import AvatarFallback from './ui/avatar/avatar-fallback.svelte';
+	import AvatarImage from './ui/avatar/avatar-image.svelte';
+	import Avatar from './ui/avatar/avatar.svelte';
+	import Button from './ui/button/button.svelte';
+	import CardContent from './ui/card/card-content.svelte';
+	import CardHeader from './ui/card/card-header.svelte';
+	import CardTitle from './ui/card/card-title.svelte';
+	import Card from './ui/card/card.svelte';
+
+	interface Props {
+		usu: UserResponseDto;
+	}
+
+	let { usu }: Props = $props();
+</script>
+
+<Card class="w-[50%]">
+	<CardContent>
+		<div class="flex justify-between">
+			<a class="flex items-center gap-2" href={resolve(`/${usu.username}`)}>
+				<Avatar>
+					<AvatarImage src={usu.profileImageUrl}></AvatarImage>
+					<AvatarFallback>{usu.displayName[0]}</AvatarFallback>
+				</Avatar>
+				<h4 class="scroll-m-20 text-xl font-semibold tracking-tight">
+					{usu.displayName}
+				</h4>
+				<p class="text-sm text-muted-foreground">@{usu.username}</p>
+			</a>
+			<div>
+				<Button variant="outline">Seguir</Button>
+			</div>
+		</div>
+		{#if usu.bio}
+			<div class="mt-4 rounded-full bg-accent p-4 text-muted-foreground">{usu.bio}</div>
+		{/if}
+	</CardContent>
+</Card>

src/lib/hooks/busquedaUsuarios.ts

@@ -0,0 +1,18 @@
+import { apiBase } from '@/stores/url';
+import { get } from 'svelte/store';
+
+export async function busquedaUsuarios(username: string) {
+	if (!username) return null;
+	try {
+		const req = await fetch(`${get(apiBase)}/api/users/search?q=${username}`, {
+			method: 'GET'
+		});
+		if (req.ok) {
+			let data = await req.json();
+			return data;
+		}
+		return [];
+	} catch {
+		return null;
+	}
+}