src/lib/components/models/drawer/Drawer.svelte

<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';

  let data = get(modelStore);

  modelStore.subscribe((value) => {
    data = value;
  });

  const handleClose = () => {
    modelStore.set(undefined);

    $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={!data?.id}
  class:pointer-events-none={!data?.id}
>
  <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={!data?.id}
    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={data?.image} class="lg:w-16 lg:h-16 w-12 h-12 rounded-xl bg-red-500" alt={data?.id} />
          <div>
            <p class="text-white font-semibold text-lg lg:text-2xl mb-1 truncate">
              {data?.title ?? data?.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" />
                {data?.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" />
                {data?.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 data?.gallery && data?.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 data?.gallery as example}
                <div class="w-full h-[120px] relative z-[1] mb-3 overflow-hidden">
                  <img src="https://huggingface.co/datasets/enzostvs/loras-studio/resolve/main/{example.image}?expose=true'" 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 ({data?.comments?.length ?? 0})
      </p>
      {#if data?.id}
        <UserIsLogged>
          <Comments comments={data?.comments} model={data} />
        </UserIsLogged>
      {/if}
    </footer>
  </div>
</div>