94 lines
3 KiB
Svelte
94 lines
3 KiB
Svelte
<script>
|
|
import {
|
|
AppRail,
|
|
AppRailAnchor,
|
|
AppShell,
|
|
Modal,
|
|
getDrawerStore,
|
|
getModalStore,
|
|
Drawer
|
|
} from '@skeletonlabs/skeleton';
|
|
import {faCode, faGear} from '@fortawesome/free-solid-svg-icons';
|
|
import { Fa } from 'svelte-fa';
|
|
import BackAppRailAnchor from "$lib/components/BackAppRailAnchor.svelte";
|
|
export let data;
|
|
|
|
let drawerStore = getDrawerStore();
|
|
let modalStore = getModalStore();
|
|
|
|
const tagTypes = Object.entries({
|
|
artist: 'Artist',
|
|
character: 'Character',
|
|
copyright: 'Copyright',
|
|
general: 'General',
|
|
lore: 'Lore',
|
|
meta: 'Meta',
|
|
invalid: 'Invalid'
|
|
});
|
|
</script>
|
|
|
|
<Modal />
|
|
<Drawer>
|
|
|
|
</Drawer>
|
|
<AppShell>
|
|
<svelte:fragment slot="sidebarRight">
|
|
<div class="p-2 h-dvh">
|
|
{#each tagTypes as [name, label]}
|
|
<div class="mb-2">
|
|
<p class="font-bold">{label}</p>
|
|
{#each data.post.tags[name] as tag}
|
|
<p>{tag}</p>
|
|
{/each}
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
</svelte:fragment>
|
|
<svelte:fragment slot="sidebarLeft">
|
|
<AppRail height="h-dvh">
|
|
<svelte:fragment slot="lead">
|
|
<BackAppRailAnchor popCount={2} />
|
|
</svelte:fragment>
|
|
<svelte:fragment slot="trail">
|
|
<!-- <AppRailAnchor on:click={() => modalStore.trigger({body: JSON.stringify(data.post, null, 2)})}>
|
|
<div class="flex flex-col gap-2 place-content-center">
|
|
<Fa size={'2x'} icon={faCode} />
|
|
<p>Post data</p>
|
|
</div>
|
|
</AppRailAnchor> -->
|
|
<AppRailAnchor on:click={() => drawerStore.open()}>
|
|
<div class="flex flex-col gap-2 place-content-center">
|
|
<Fa size={'2x'} icon={faGear} />
|
|
<p>Settings</p>
|
|
</div>
|
|
</AppRailAnchor>
|
|
</svelte:fragment>
|
|
</AppRail>
|
|
</svelte:fragment>
|
|
<svelte:fragment slot="default">
|
|
<div class="max-h-dvh container mx-auto p-2">
|
|
<div class="flex flex-row place-content-center">
|
|
{#if data?.post?.preview?.has}
|
|
<img class="mb-2" src={data.post.preview.url} alt={`Post ${data.post.id}`} />
|
|
{:else}
|
|
<img class="mb-2" src={data.post.file.url} alt={`Post ${data.post.id}}`} />
|
|
{/if}
|
|
</div>
|
|
<div class="card">
|
|
<header class="px-3 pt-2">
|
|
<p class="font-bold">Description</p>
|
|
</header>
|
|
<section class="p-3">
|
|
<p>{data.post.description}</p>
|
|
</section>
|
|
</div>
|
|
<!-- <div>
|
|
<pre>
|
|
{JSON.stringify(data, null, 2)}
|
|
</pre>
|
|
</div>-->
|
|
</div>
|
|
</svelte:fragment>
|
|
</AppShell>
|
|
|
|
<style lang="postcss"></style>
|