fede/minix-front
1
0
Fork 0
mirror of https://github.com/emailerfacu-spec/minix-front.git synced 2026-04-20 16:17:32 -03:00
Code Issues Packages Projects Releases Wiki Activity

fix: interfaz de htags

Browse Source
This commit is contained in:
fedpo
2025-12-21 23:43:36 -03:00
parent 4f3af346e6
commit d8fdaafd35
2 changed files with 31 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
src/routes/htag/[htag]/+page.svelte
View File

@@ -1,7 +1,6 @@
<script lang="ts"> <script lang="ts">
import PostCard from '@/components/PostCard.svelte'; import PostCard from '@/components/PostCard.svelte';
import CardContent from '@/components/ui/card/card-content.svelte'; import CardContent from '@/components/ui/card/card-content.svelte';
import CardHeader from '@/components/ui/card/card-header.svelte';
import CardTitle from '@/components/ui/card/card-title.svelte'; import CardTitle from '@/components/ui/card/card-title.svelte';
import Card from '@/components/ui/card/card.svelte'; import Card from '@/components/ui/card/card.svelte';
import type { Post } from '../../../types.js'; import type { Post } from '../../../types.js';
@@ -14,18 +13,24 @@
interface props { interface props {
data: { data: {
htag: string; htag: string;
cantidad: [Post]; posts: {
count: number;
response: [Post];
};
}; };
} }
let { data }: props = $props(); let { data }: props = $props();
let posts = $state(data.cantidad);
let posts = $state(data.posts.response);
let postAModificar: Post | null = $state(null);
let postsfiltro = $derived( let postsfiltro = $derived(
posts.filter((x) => { posts.filter((x) => {
const regex = new RegExp(`#${data.htag}\\b`, 'gm'); const regex = new RegExp(`#${data.htag}\\b`, 'gm');
return regex.test(x.content); return regex.test(x.content);
}) })
); );
let postAModificar: Post | null = $state(null);
async function handleEditar(e: SubmitEvent) { async function handleEditar(e: SubmitEvent) {
e.preventDefault(); e.preventDefault();
@@ -41,27 +46,27 @@
</script> </script>
<div class="flex min-h-fit w-full flex-col items-center justify-center pt-2"> <div class="flex min-h-fit w-full flex-col items-center justify-center pt-2">
<div class="w-full max-w-6xl"> <div class=" w-full max-w-6xl flex-col items-center">
<Card> <div class="flex justify-center">
<CardHeader> <Card class="w-fit">
<CardTitle> <CardContent>
<h1 <CardTitle>
class="mb-2 scroll-m-20 text-center text-4xl font-extrabold tracking-tight lg:text-5xl" <h1
> class="mb-2 scroll-m-20 text-center text-4xl font-extrabold tracking-tight text-blue-500 lg:text-5xl"
#{data.htag} >
</h1> #{data.htag}
<Separator></Separator> </h1>
Uso del hashtag: <Separator></Separator>
<span class="text-blue-500"> </span> </CardTitle>
</CardTitle> <p>
</CardHeader> El hashtag se ha utilizado {data.posts.count} ve{#if data.posts.count > 1}ces{:else}z{/if}
<CardContent> </p>
<p>El hashtag se ha utilizado {data.cantidad} veces</p> </CardContent>
</CardContent> </Card>
</Card> </div>
<hr class="my-2" /> <hr class="my-2" />
<div class="mt-1"> <div class="mt-1 flex flex-col gap-3">
{#each postsfiltro as post} {#each postsfiltro as post}
<PostCard {post} bind:postAModificar /> <PostCard {post} bind:postAModificar />
{/each} {/each}

6
src/routes/htag/[htag]/+page.ts
View File

@@ -4,7 +4,7 @@ import { error } from '@sveltejs/kit';
export async function load({ params }) { export async function load({ params }) {
let { htag } = params; let { htag } = params;
const cantidad = await obtenerCantidadDeUsosdeHtag(htag); const posts = await obtenerCantidadDeUsosdeHtag(htag);
if (cantidad == null || cantidad.lenght == 0) return error(404, 'no existe el #(hashtag)'); // if (cantidad == null || posts.lenght == 0) return error(404, 'no existe el #(hashtag)');
return { htag, cantidad }; return { htag, posts };
} }