fede/minix-front
1
0
Fork 0
mirror of https://github.com/emailerfacu-spec/minix-front.git synced 2026-04-01 13:10:44 -03:00
Code Issues Packages Projects Releases Wiki Activity

creado componente aparte para la tarjeta de post y hice el skeleton ui

Browse Source 
para el edit y borrar
This commit is contained in:
fedpo
2025-11-24 18:38:39 -03:00
parent a5206a3724
commit a8dc380d03
4 changed files with 70 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
src/lib/components/PostCard.svelte Normal file
View File

@@ -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>

0
src/lib/hooks/deletePost.ts Normal file
View File

0
src/lib/hooks/updatePost.ts Normal file
View File

32
src/routes/+page.svelte
View File

@@ -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>