añadido editar y eliminar posts

src/routes/+page.svelte

@@ -29,7 +29,7 @@
 </script>
 
 <div class="flex min-h-fit w-full items-center justify-center p-6 md:p-10">
-	<div class="w-full max-w-2xl">
+	<div class="w-full max-w-6xl">
 		<div class="flex flex-col gap-2">
 			{#if $sesionStore !== null}
 				<CrearPost />

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

@@ -9,12 +9,19 @@
 	import type { Post } from '../../types.js';
 	import Spinner from '@/components/ui/spinner/spinner.svelte';
 	import { fade, slide } from 'svelte/transition';
+	import PostCard from '@/components/PostCard.svelte';
+	import { posts, setPosts, updatePostStore } from '@/stores/posts.js';
+	import InputGroup from '@/components/ui/input-group/input-group.svelte';
+	import InputGroupTextarea from '@/components/ui/input-group/input-group-textarea.svelte';
+	import InputGroupAddon from '@/components/ui/input-group/input-group-addon.svelte';
+	import { updatePost } from '@/hooks/updatePost.js';
+	import ModalEditar from './modalEditar.svelte';
 
 	let { params } = $props();
 
-	let posts: Post[] = $state([]);
 	let cargando = $state(true);
 	let mensajeError = $state('');
+	let postAModificar: Post | null = $state(null);
 
 	const { subscribe } = apiBase;
 	let baseUrl: string = '';
@@ -33,7 +40,7 @@
 				method: 'GET'
 			});
 			if (req.ok) {
-				posts = await req.json();
+				setPosts(await req.json());
 				return;
 			}
 			mensajeError = 'Fallo al obtener los datos';
@@ -43,10 +50,23 @@
 			cargando = false;
 		}
 	}
+
+	async function handleEditar(e: SubmitEvent) {
+		e.preventDefault();
+		//		post.content = 'test';
+		if (postAModificar == null) return;
+		await updatePost(
+			postAModificar,
+			(postnuevo: Post) => updatePostStore(postAModificar!.id, postnuevo),
+
+			mensajeError
+		);
+		postAModificar = null;
+	}
 </script>
 
 <div class="flex min-h-fit w-full items-center justify-center p-6 md:p-10">
-	<div class="w-full max-w-2xl">
+	<div class="w-full max-w-6xl">
 		<Card class="mb-2 overflow-hidden">
 			<CardContent>
 				<div class="flex justify-center">
@@ -87,6 +107,19 @@
 					</CardContent>
 				</Card>
 			</div>
+		{:else}
+			<div class="flex flex-col gap-2">
+				{#each $posts as post}
+					<div out:slide>
+						<PostCard {post} bind:postAModificar />
+					</div>
+				{/each}
+			</div>
 		{/if}
 	</div>
 </div>
+{#if postAModificar}
+	<div in:fade>
+		<ModalEditar callbackfn={handleEditar} bind:post={postAModificar} />
+	</div>
+{/if}

src/routes/[perfil]/modalEditar.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">
+	import { InputGroup } from '@/components/ui/input-group';
+	import InputGroupAddon from '@/components/ui/input-group/input-group-addon.svelte';
+	import InputGroupButton from '@/components/ui/input-group/input-group-button.svelte';
+	import InputGroupTextarea from '@/components/ui/input-group/input-group-textarea.svelte';
+	import Kbd from '@/components/ui/kbd/kbd.svelte';
+	import type { Post } from '../../types';
+	import ArrowUpIcon from '@lucide/svelte/icons/arrow-up';
+	import { Dialog } from '@/components/ui/dialog';
+	import DialogContent from '@/components/ui/dialog/dialog-content.svelte';
+	import DialogDescription from '@/components/ui/dialog/dialog-description.svelte';
+	import DialogHeader from '@/components/ui/dialog/dialog-header.svelte';
+	import DialogTitle from '@/components/ui/dialog/dialog-title.svelte';
+
+	interface Props {
+		post: Post | null;
+		callbackfn: Function;
+	}
+	let { post = $bindable(), callbackfn }: Props = $props();
+
+	function handleKeydown(e: KeyboardEvent) {
+		if (e.ctrlKey && e.key === 'Enter') {
+			callbackfn(e);
+		}
+	}
+</script>
+
+<Dialog open={true} onOpenChange={() => (post = null)}>
+	<DialogContent>
+		<DialogHeader>
+			<DialogTitle>Editar Publicacion</DialogTitle>
+		</DialogHeader>
+		<DialogDescription>
+			<form
+				onsubmit={(e: SubmitEvent) => {
+					callbackfn(e);
+				}}
+			>
+				<InputGroup>
+					<InputGroupTextarea
+						bind:value={post!.content}
+						maxlength={280}
+						placeholder="Alguna novedad?"
+						onkeydown={handleKeydown}
+						class="text-white"
+					></InputGroupTextarea>
+
+					<InputGroupAddon align="block-end" class="bg-">
+						<div class="flex w-full justify-between">
+							<Kbd class="text-sm leading-none font-medium italic">
+								<p class:text-red-500={post!.content.length > 239}>
+									{post!.content.length}
+								</p>
+								/ 280
+							</Kbd>
+							<InputGroupButton
+								variant="default"
+								type="submit"
+								class="transform rounded-full transition-transform ease-in hover:scale-120"
+								size="xs"
+							>
+								<p>Modificar</p>
+								<ArrowUpIcon />
+							</InputGroupButton>
+						</div>
+					</InputGroupAddon>
+				</InputGroup>
+			</form>
+		</DialogDescription>
+	</DialogContent>
+</Dialog>