From a8dc380d0393c2461fd3ece23a9dfe04bf35ec72 Mon Sep 17 00:00:00 2001
From: fede <federico.nicolas.polidoro@gmail.com>
Date: Mon, 24 Nov 2025 18:38:39 -0300
Subject: [PATCH] creado componente aparte para la tarjeta de post y hice el
 skeleton ui para el edit y borrar

---
 src/lib/components/PostCard.svelte | 68 ++++++++++++++++++++++++++++++
 src/lib/hooks/deletePost.ts        |  0
 src/lib/hooks/updatePost.ts        |  0
 src/routes/+page.svelte            | 32 +-------------
 4 files changed, 70 insertions(+), 30 deletions(-)
 create mode 100644 src/lib/components/PostCard.svelte
 create mode 100644 src/lib/hooks/deletePost.ts
 create mode 100644 src/lib/hooks/updatePost.ts

diff --git a/src/lib/components/PostCard.svelte b/src/lib/components/PostCard.svelte
new file mode 100644
index 0000000..b9fca16
--- /dev/null
+++ b/src/lib/components/PostCard.svelte
@@ -0,0 +1,68 @@
+<script lang="ts">
+	import Ellipsis from '@lucide/svelte/icons/ellipsis';
+	import Trash2 from '@lucide/svelte/icons/trash-2';
+	import Pen from '@lucide/svelte/icons/pen';
+	import type { Post } from '../../types';
+	import Button from './ui/button/button.svelte';
+	import { Content } from './ui/card';
+	import CardFooter from './ui/card/card-footer.svelte';
+	import CardHeader from './ui/card/card-header.svelte';
+	import Card from './ui/card/card.svelte';
+	import { DropdownMenu } from './ui/dropdown-menu';
+	import DropdownMenuTrigger from './ui/dropdown-menu/dropdown-menu-trigger.svelte';
+	import DropdownMenuContent from './ui/dropdown-menu/dropdown-menu-content.svelte';
+	import DropdownMenuGroup from './ui/dropdown-menu/dropdown-menu-group.svelte';
+	import DropdownMenuLabel from './ui/dropdown-menu/dropdown-menu-label.svelte';
+	import DropdownMenuSeparator from './ui/dropdown-menu/dropdown-menu-separator.svelte';
+	import DropdownMenuItem from './ui/dropdown-menu/dropdown-menu-item.svelte';
+
+	interface postProp {
+		post: Post;
+	}
+
+	let { post }: postProp = $props();
+</script>
+
+<Card>
+	<CardHeader>
+		<div class="flex flex-col">
+			<div class="flex items-center justify-between">
+				<span class="text-sm font-medium">{post.authorId}</span>
+				<DropdownMenu>
+					<DropdownMenuTrigger>
+						<Button variant="ghost" class="rounded-full"><Ellipsis /></Button>
+					</DropdownMenuTrigger>
+					<DropdownMenuContent>
+						<DropdownMenuGroup>
+							<DropdownMenuLabel>Opciones Publicación</DropdownMenuLabel>
+							<DropdownMenuSeparator />
+							<DropdownMenuItem><Pen /> Editar</DropdownMenuItem>
+							<DropdownMenuItem onclick={() => {}}>
+								<Trash2 class="text-red-500" />
+								<p class="text-red-500">Borrar</p>
+							</DropdownMenuItem>
+						</DropdownMenuGroup>
+					</DropdownMenuContent>
+				</DropdownMenu>
+			</div>
+		</div>
+	</CardHeader>
+	<Content>
+		<p class="text-sm">{post.content}</p>
+		{#if post.imageUrl}
+			<img src={post.imageUrl} alt="Post" class="mt-2 rounded-md" />
+		{/if}
+	</Content>
+	<CardFooter>
+		<div class="flex items-center justify-between gap-2 pt-2 text-xs text-muted-foreground">
+			<span>{post.likesCount} likes</span>
+			<span>{post.repliesCount} replies</span>
+			<span class="text-xs text-muted-foreground"
+				>{post.createdAt.replace('T', ' ').split('.')[0]}</span
+			>
+			{#if post.isEdited}
+				<span>Editado</span>
+			{/if}
+		</div>
+	</CardFooter>
+</Card>
diff --git a/src/lib/hooks/deletePost.ts b/src/lib/hooks/deletePost.ts
new file mode 100644
index 0000000..e69de29
diff --git a/src/lib/hooks/updatePost.ts b/src/lib/hooks/updatePost.ts
new file mode 100644
index 0000000..e69de29
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 49a7090..bcde02d 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,13 +1,11 @@
 <script lang="ts">
 	import Card from '@/components/ui/card/card.svelte';
-	import type { Post } from '../types';
 	import { Content } from '@/components/ui/card';
 	import { apiBase } from '@/stores/url';
 	import { sesionStore } from '@/stores/usuario';
 	import CrearPost from '@/components/crear-post.svelte';
-	import CardHeader from '@/components/ui/card/card-header.svelte';
-	import CardFooter from '@/components/ui/card/card-footer.svelte';
 	import { posts, setPosts } from '@/stores/posts';
+	import PostCard from '@/components/PostCard.svelte';
 
 	$effect(() => {
 		(async () => {
@@ -46,33 +44,7 @@
 				</Card>
 			{:else}
 				{#each $posts as post}
-					<Card>
-					    <CardHeader>
-							<div class="flex flex-col space-y-2">
-								<div class="flex items-center justify-between">
-									<span class="text-sm font-medium">{post.authorId}</span>
-									<span class="text-xs text-muted-foreground"
-										>{post.createdAt.replace("T", " ").split(".")[0]}</span
-									>
-								</div>
-							</div>
-						</CardHeader>
-						<Content>
-							<p class="text-sm">{post.content}</p>
-							{#if post.imageUrl}
-								<img src={post.imageUrl} alt="Post" class="mt-2 rounded-md" />
-							{/if}
-						</Content>
-						<CardFooter>
-							<div class="flex items-center justify-between pt-2 gap-2 text-xs text-muted-foreground">
-								<span>{post.likesCount} likes</span>
-								<span>{post.repliesCount} replies</span>
-								{#if post.isEdited}
-									<span>Editado</span>
-								{/if}
-							</div>
-						</CardFooter>
-					</Card>
+					<PostCard {post} />
 				{/each}
 			{/if}
 		</div>