97 lines
4.4 KiB
Svelte
97 lines
4.4 KiB
Svelte
<script>
|
|
import { faStar, faCaretUp, faCaretDown, faHeart, faCopy } from '@fortawesome/free-solid-svg-icons';
|
|
import { Fa } from 'svelte-fa';
|
|
import { PostMedia, Header } from '$lib/components';
|
|
import { onMount } from 'svelte';
|
|
import { TAG_TYPES } from '$lib/Tags';
|
|
import { invoke } from '@tauri-apps/api/core';
|
|
import { goto } from "$app/navigation";
|
|
import { loading } from "$lib/stores.js";
|
|
|
|
let { data } = $props();
|
|
let post = $state(null);
|
|
const tagTypes = Object.entries(TAG_TYPES);
|
|
|
|
onMount(async () => {
|
|
loading.set(true);
|
|
post = await invoke('get_post', {postId: +data.postId});
|
|
loading.set(false);
|
|
});
|
|
</script>
|
|
|
|
<div class="grid [grid-template-areas:'header_header_header''main_main_aside']">
|
|
<Header class="[grid-area:header]" back={2} onsubmit={(val = '') => {
|
|
const queryParams = new URLSearchParams();
|
|
queryParams.set('search', val);
|
|
goto("/?" + queryParams.toString())
|
|
}}></Header>
|
|
|
|
<main class="[grid-area:main]">
|
|
{#if post}
|
|
<div class="flex flex-col">
|
|
<section class="flex flex-col place-items-center bg-white">
|
|
<PostMedia class="object-contain" {post} />
|
|
</section>
|
|
<section class="flex flex-row justify-between bg-black">
|
|
<div class="flex flex-row px-2 gap-2">
|
|
<button class="py-2 px-3 flex flex-row place-items-center gap-1 text-white hover:text-black hover:bg-white">
|
|
<span class:accent-yellow-50={!post.is_favorited} class:accent-yellow-500={post.is_favorited}>
|
|
<Fa size={'1.5x'} icon={faHeart} />
|
|
</span>
|
|
|
|
<span>
|
|
{post.fav_count}
|
|
</span>
|
|
</button>
|
|
<button class="py-2 px-3 flex flex-row place-items-center text-white hover:text-black hover:bg-white">
|
|
<span class="text-secondary-500">
|
|
<Fa size={'1.5x'} icon={faStar} />
|
|
</span>
|
|
|
|
{post.score.total}
|
|
</button>
|
|
<button class="py-2 px-3 flex flex-row place-items-center text-white hover:text-black hover:bg-white">
|
|
<Fa size={'1.5x'} icon={faCaretUp} />
|
|
</button>
|
|
<button class="py-2 px-3 flex flex-row place-items-center text-white hover:text-black hover:bg-white">
|
|
<Fa size={'1.5x'} icon={faCaretDown} />
|
|
</button>
|
|
</div>
|
|
<div class="flex flex-row px-2 gap-2">
|
|
<button class="py-2 px-3 flex flex-row place-items-center text-white hover:text-black hover:bg-white"
|
|
onclick={async () => {await navigator.clipboard.writeText(`https://e621.net/posts/${post.id}`)}}>
|
|
<Fa size={'1.5x'} icon={faCopy} />
|
|
</button>
|
|
<button class="py-2 px-3 flex flex-row place-items-center text-white hover:text-black hover:bg-white">
|
|
ID: {post.id}
|
|
</button>
|
|
</div>
|
|
</section>
|
|
<footer class="card-footer py-4 px-2">
|
|
<h3 class="font-bold mb-2" class:line-through={post.description === ''} >Description</h3>
|
|
<p class="text-wrap">{post.description}</p>
|
|
<!--<pre>{JSON.stringify(post, null, 4)}</pre>-->
|
|
</footer>
|
|
</div>
|
|
{/if}
|
|
</main>
|
|
|
|
<aside class="[grid-area:aside]">
|
|
{#if post}
|
|
<div class="p-2">
|
|
{#each tagTypes as [name, label]}
|
|
{#if post.tags[name].length > 0}
|
|
<div class="mb-2">
|
|
<p class="font-bold">{label}</p>
|
|
{#each post.tags[name] as tag}
|
|
<p>{tag}</p>
|
|
{/each}
|
|
</div>
|
|
{/if}
|
|
{/each}
|
|
</div>
|
|
{/if}
|
|
</aside>
|
|
</div>
|
|
|
|
<style lang="postcss"></style>
|