añadido soporte de eliminar y editar respuestas.

ademas se añadieron animaciones
This commit is contained in:
2026-01-15 18:06:34 -03:00
parent 4a7947e34a
commit b018426ce7

View File

@@ -5,7 +5,7 @@
import type { Post } from '../../../types';
import PostCard from '@/components/PostCard.svelte';
import ModalEditar from '../../[perfil]/modalEditar.svelte';
import { fade, slide } from 'svelte/transition';
import { fade } from 'svelte/transition';
import { updatePost } from '@/hooks/updatePost';
import { goto, invalidate } from '$app/navigation';
import Separator from '@/components/ui/separator/separator.svelte';
@@ -18,6 +18,13 @@
import ThumbsUp from '@lucide/svelte/icons/thumbs-up';
import { TamañoPantalla } from './TamañoPantalla.svelte';
import BotonSeguir from '@/components/BotonSeguir.svelte';
import Pen from '@lucide/svelte/icons/pen';
import Trash_2 from '@lucide/svelte/icons/trash-2';
import { Tooltip } from '@/components/ui/tooltip';
import TooltipTrigger from '@/components/ui/tooltip/tooltip-trigger.svelte';
import TooltipContent from '@/components/ui/tooltip/tooltip-content.svelte';
import { deletePost } from '@/hooks/deletePost';
import { flip } from 'svelte/animate';
interface Prop {
data: {
@@ -98,12 +105,14 @@
<div class="flex flex-col gap-2">
{#each data.respuestas as respuesta (respuesta.id)}
<!-- {#if tamaño.isMobile} -->
<!-- {#if true} -->
{@render Respuesta(respuesta)}
<!-- {:else} -->
<!-- <PostCard post={respuesta} bind:postAModificar update={() => invalidate('post:post')} /> -->
<!-- {/if} -->
<div transition:fade animate:flip>
<!-- {#if tamaño.isMobile} -->
<!-- {#if true} -->
{@render Respuesta(respuesta)}
<!-- {:else} -->
<!-- <PostCard post={respuesta} bind:postAModificar update={() => invalidate('post:post')} /> -->
<!-- {/if} -->
</div>
{/each}
</div>
</div>
@@ -134,11 +143,46 @@
<span class="text-sm font-semibold">@{post.authorName}</span>
<span class="text-xs text-gray-500">{new Date(post.createdAt).toLocaleDateString()}</span>
</div>
{#key $sesionStore?.accessToken}
<div class="flex gap-2">
<BotonSeguir {post} variant="icon-sm" />
</div>
{/key}
<div class="flex gap-2">
{#if $sesionStore?.username === post.authorName}
<Tooltip>
<TooltipTrigger>
<Button
variant="outline"
size="icon-sm"
onclick={() => {
postAModificar = post;
}}
>
<Pen />
</Button>
</TooltipTrigger>
<TooltipContent>Editar</TooltipContent>
</Tooltip>
<Tooltip>
<TooltipTrigger>
<Button
variant="destructive"
size="icon-sm"
onclick={async () => {
await deletePost(
post,
() => {
invalidate('post:respuestas');
},
false,
''
);
}}
>
<Trash_2 />
</Button>
</TooltipTrigger>
<TooltipContent>Borrar</TooltipContent>
</Tooltip>
{/if}
<BotonSeguir {post} variant="icon-sm" />
</div>
</div>
<p class=" mt-1 line-clamp-2 rounded-md p-2 text-lg">
{post.content}