Spaces:
Running
on
CPU Upgrade
Running
on
CPU Upgrade
File size: 4,159 Bytes
8a18175 09efb88 8a18175 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 |
<script lang="ts">
import { clickoutside } from '@svelte-put/clickoutside';
import { goto, invalidate } from "$app/navigation";
import { page } from "$app/stores";
import { get } from "svelte/store";
import Icon from "@iconify/svelte";
import { galleryStore } from "$lib/stores/use-gallery";
import UserIsLogged from '$lib/components/UserIsLogged.svelte';
import Comments from '$lib/components/community/drawer/Comments.svelte';
import Reactions from '$lib/components/community/reactions/Reactions.svelte';
export let form: Record<string, string> | undefined = undefined;
let { open, gallery, next, previous } = get(galleryStore);
galleryStore.subscribe((value) => {
open = value?.open;
gallery = value?.gallery;
next = value?.next;
previous = value?.previous;
});
const handleClose = async () => {
galleryStore.update((value) => {
return {
...value,
open: false,
};
});
$page.url.searchParams.delete('model');
await goto(`?${$page.url.searchParams.toString()}`);
await invalidate(url => url.pathname.includes("/api/models"));
};
const handleClickNext = () => {
const element = document.getElementById('gallery_examples');
element?.scrollBy({
left: 300,
behavior: 'smooth'
});
}
const handlePressEscape = (event: KeyboardEvent) => {
if (event.key === 'Escape') {
handleClose();
}
};
</script>
<div
class="w-full fixed top-0 left-0 h-full bg-black bg-opacity-50 z-0 backdrop-blur transition-all duration-100"
class:opacity-0={!open}
class:pointer-events-none={!open}
class:!z-40={open}
>
{#if open}
<div
class="ml-auto w-full max-w-3xl bg-neutral-950 h-full border-l border-neutral-800 transition-all duration-200 flex flex-col justify-between"
use:clickoutside on:clickoutside={handleClose}
>
{#if gallery?.id}
<div class="overflow-auto p-8">
<header class="mb-6 justify-between items-start flex">
<div class="flex items-center justify-start gap-4">
<img src={gallery?.user?.picture} class="w-12 h-12 rounded-full object-cover" alt={gallery?.user?.name} />
<div>
<p class="text-neutral-100 font-bold text-lg">
{gallery?.user?.name}
</p>
<p class="text-neutral-400 text-sm">
@{gallery?.user?.preferred_username}
</p>
</div>
</div>
<button on:click={handleClose}>
<Icon icon="carbon:close" class="w-6 h-6 text-white cursor-pointer" />
</button>
</header>
<main class="w-full grid grid-cols-1 gap-5">
<div class="w-full">
<Reactions reactions={gallery?.reactions} gallery_id={gallery.id} />
</div>
<img src="/api/images/{gallery?.image}" class="max-w-[450px] w-full h-[450px] bg-neutral-800 object-cover rounded-xl" alt={gallery?.prompt} />
<div class="px-2">
<p class="text-neutral-400 font-semibold text-xs uppercase">
Prompt
</p>
<p class="text-neutral-200 text-base font-medium mt-2">"{gallery?.prompt}"</p>
</div>
<div class="px-2">
<p class="text-neutral-400 font-semibold text-xs uppercase">
Dimension
</p>
<p class="text-neutral-200 text-base font-medium mt-2">1024x1024</p>
</div>
</main>
</div>
<footer class="p-8 border-t border-neutral-900 bg-neutral-900/30 flex flex-col justify-between relative">
<p class="font-semibold text-neutral-100 text-base lg:text-lg mb-6">
Commentaire{(gallery?.comments?.length ?? 0) > 1 ? 's' : ''} ({gallery?.comments?.length ?? 0})
</p>
{#if gallery?.id}
<UserIsLogged>
<Comments comments={gallery?.comments} gallery={gallery} />
</UserIsLogged>
{/if}
</footer>
{/if}
</div>
{/if}
</div>
<svelte:window on:keydown={handlePressEscape} /> |