añadido boton de seguir a las respuestas

This commit is contained in:
2026-01-08 12:23:02 -03:00
parent 65fe89ed5a
commit b69e2f19ab
2 changed files with 28 additions and 17 deletions
+5 -2
View File
@@ -13,7 +13,10 @@
import CardError from './CardError.svelte'; import CardError from './CardError.svelte';
import { cacheSeguidos } from '@/stores/cacheSeguidos.svelte'; import { cacheSeguidos } from '@/stores/cacheSeguidos.svelte';
let { post }: { post: Omit<Partial<Post>, 'authorId'> & { authorId: string } } = $props(); let {
post,
variant = 'icon-lg'
}: { post: Omit<Partial<Post>, 'authorId'> & { authorId: string }; variant?: string } = $props();
let seguido: Boolean | null = $state(null); let seguido: Boolean | null = $state(null);
@@ -59,7 +62,7 @@
<Button <Button
variant={seguido == true ? 'destructive' : 'outline'} variant={seguido == true ? 'destructive' : 'outline'}
disabled={seguido == null} disabled={seguido == null}
size="icon-lg" size={variant}
onclick={async () => { onclick={async () => {
if (seguido == null) return; if (seguido == null) return;
const anteriorEstado = seguido; const anteriorEstado = seguido;
+23 -15
View File
@@ -17,6 +17,7 @@
import { likePost } from '@/hooks/likePost'; import { likePost } from '@/hooks/likePost';
import ThumbsUp from '@lucide/svelte/icons/thumbs-up'; import ThumbsUp from '@lucide/svelte/icons/thumbs-up';
import { TamañoPantalla } from './TamañoPantalla.svelte'; import { TamañoPantalla } from './TamañoPantalla.svelte';
import BotonSeguir from '@/components/BotonSeguir.svelte';
interface Prop { interface Prop {
data: { data: {
@@ -115,22 +116,29 @@
{#snippet Respuesta(post: Post)} {#snippet Respuesta(post: Post)}
<div class="ml-2 flex-1"> <div class="ml-2 flex-1">
<div class="flex items-center space-x-1"> <div class="flex justify-between">
{#if post.authorImageUrl} <div class="flex items-center space-x-1">
<img {#if post.authorImageUrl}
src={post.authorImageUrl} <img
alt={post.authorDisplayName} src={post.authorImageUrl}
class="h-8 w-8 shrink-0 rounded-full object-cover" alt={post.authorDisplayName}
/> class="h-8 w-8 shrink-0 rounded-full object-cover"
{:else} />
<div {:else}
class="flex h-8 w-8 items-center justify-center rounded-full bg-gray-300 text-xs font-medium text-white" <div
> class="flex h-8 w-8 items-center justify-center rounded-full bg-gray-300 text-xs font-medium text-white"
{post.authorName?.charAt(0).toUpperCase()} >
{post.authorName?.charAt(0).toUpperCase()}
</div>
{/if}
<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> </div>
{/if} {/key}
<span class="text-sm font-semibold">@{post.authorName}</span>
<span class="text-xs text-gray-500">{new Date(post.createdAt).toLocaleDateString()}</span>
</div> </div>
<p class=" mt-1 line-clamp-2 rounded-md p-2 text-lg"> <p class=" mt-1 line-clamp-2 rounded-md p-2 text-lg">
{post.content} {post.content}