Spaces:
Running
on
CPU Upgrade
Running
on
CPU Upgrade
File size: 3,760 Bytes
d6da254 83d9f5e 83deba1 d6da254 c5a4bec d6da254 f05d33c d6da254 f05d33c d6da254 f05d33c 83deba1 d6da254 f05d33c d6da254 f05d33c 83d9f5e d6da254 f05d33c d6da254 f05d33c d6da254 f05d33c d6da254 f05d33c d6da254 f05d33c d6da254 f05d33c d6da254 c5a4bec d6da254 f05d33c d6da254 f05d33c d6da254 f05d33c d6da254 |
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 |
<script lang="ts">
import { clickoutside } from '@svelte-put/clickoutside';
import { goto } from "$app/navigation";
import { page } from "$app/stores";
import { get } from "svelte/store";
import Icon from "@iconify/svelte";
import { modelStore } from "$lib/stores/use-model";
import UserIsLogged from '$lib/components/UserIsLogged.svelte';
import Comments from '$lib/components/models/drawer/comments/Comments.svelte';
import { env } from '$env/dynamic/public';
let { open, model } = get(modelStore);
modelStore.subscribe((value) => {
open = value?.open;
model = value?.model;
});
const handleClose = () => {
modelStore.update((value) => {
return {
...value,
open: false,
};
});
$page.url.searchParams.delete('model');
goto(`?${$page.url.searchParams.toString()}`);
};
</script>
<div
class="w-full fixed top-0 left-0 h-full bg-black bg-opacity-50 z-40 backdrop-blur transition-all duration-100"
class:opacity-0={!open}
class:pointer-events-none={!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"
class:translate-x-full={!open}
use:clickoutside on:clickoutside={handleClose}
>
<div class="p-8 overflow-auto">
<header class="flex w-full justify-between items-start mb-6">
<div class="flex items-center justify-start gap-3 lg:gap-6">
<img src={model?.image} class="lg:w-16 lg:h-16 w-12 h-12 rounded-xl bg-neutral-800 object-cover" alt={model?.id} />
<div>
<p class="text-white font-semibold text-lg lg:text-2xl mb-1 truncate">
{model?.title ?? model?.id}
</p>
<div class="justify-start items-center gap-2 flex">
<div class="bg-red-500 bg-opacity-20 border border-red-500 px-3 py-1.5 rounded-full text-neutral-100 flex items-center justify-center gap-1 font-bold text-xs">
<Icon icon="solar:heart-bold" class="lg:w-4 lg:h-4 w-3 h-3 text-red-500" />
{model?.likes ?? 0}
</div>
<div class="bg-blue-500 bg-opacity-20 border border-blue-500 px-3 py-1.5 rounded-full text-neutral-100 flex items-center justify-center gap-1 font-bold text-xs">
<Icon icon="solar:download-square-bold" class="lg:w-4 lg:h-4 w-3 h-3 text-blue-500" />
{model?.downloads ?? 0}
</div>
</div>
</div>
</div>
<button on:click={handleClose}>
<Icon icon="carbon:close" class="w-6 h-6 text-white cursor-pointer" />
</button>
</header>
<main>
{#if model?.gallery && model?.gallery?.length > 0}
<div>
<p class="text-neutral-400 uppercase text-xs font-bold">Examples</p>
<div class="grid grid-cols-3 md:grid-cols-5 lg:grid-cols-6 gap-5 mt-2">
{#each model?.gallery as example}
<div class="w-full h-[120px] relative z-[1] mb-3 overflow-hidden">
<img src="{env.PUBLIC_FILE_UPLOAD_DIR}/{example.image}" class="w-full h-full bg-center bg-cover rounded-lg object-cover object-center bg-neutral-800" alt={example.prompt} />
</div>
{/each}
</div>
</div>
{/if}
</main>
</div>
<footer class="p-8 border-t border-neutral-900 bg-neutral-900/30">
<p class="font-semibold text-neutral-100 text-base lg:text-lg mb-6">
Commentaires ({model?.comments?.length ?? 0})
</p>
{#if model?.id}
<UserIsLogged>
<Comments comments={model?.comments} model={model} />
</UserIsLogged>
{/if}
</footer>
</div>
</div> |