src/lib/components/models/Card.svelte

<script lang="ts">
	import type { ModelCard } from "$lib/type";
	import Icon from "@iconify/svelte";
  import { goto } from "$app/navigation";
  import { page } from "$app/stores"; 
	import Button from "$lib/components/Button.svelte";
	import { success } from "$lib/utils/toaster";

  export let card: ModelCard;

  let visible = true;

  const handleClick = async () => {
    $page.url.searchParams.set('model', card?.id);
    goto(`?${$page.url.searchParams.toString()}`);
  };

  const publish = async () => {
    const request = await fetch(`/api/models/${card.id.replace("/", "@")}`, {
      method: "POST",
    });
    const response = await request.json();
    if (response.success) {
      card.isPublic = true;
      success("Model published successfully!");
    }
  };

  const remove = async () => {
    const request = await fetch(`/api/models/${card.id.replace("/", "@")}`, {
      method: "DELETE",
    });
    const response = await request.json();
    if (response.success) {
      visible = false;
      success("Model deleted successfully!");
    }
  };
</script>

<!-- svelte-ignore a11y-no-static-element-interactions -->
<!-- svelte-ignore a11y-click-events-have-key-events -->
{#if visible}
<div
  class="w-full cursor-pointer group bg-neutral-900 rounded-xl relative flex items-start justify-between flex-col p-3 border border-neutral-800 transition-all duration-200 brightness-90 hover:brightness-100 z-[1]"
  on:click={handleClick}
>
  <div class="w-full h-[350px] relative z-[1] mb-3 overflow-hidden">
    <img src="{card.image}" class="w-full h-full bg-center bg-cover rounded-lg object-cover object-center bg-neutral-800" alt="{card?.id}" />
    {#if !card.isPublic}
      <div
        class="absolute flex items-center justify-between bottom-0 left-0 w-full p-5 bg-neutral-900/30"
        on:click={e => e.stopPropagation()}
      >
        <Button theme="red" onClick={remove}>Delete</Button>
        <Button theme="blue" icon="icon-park-solid:check-one" onClick={publish}>Publish</Button>
      </div>
    {/if}
  </div>
  <div class="flex items-center justify-between w-full gap-4 py-1">
    <p class="text-white font-semibold text-base mb-1 truncate">{card?.id}</p>
    <div class="flex items-center justify-end gap-3">
      <div class="text-white text-sm flex items-center justify-end gap-1.5">
        <Icon icon="solar:heart-bold" class="w-5 h-5 text-red-500" />
        {card.likes ?? 0}
      </div>
      <div class="text-white text-sm flex items-center justify-end gap-1.5">
        <Icon icon="solar:download-square-bold" class="w-5 h-5 text-blue-500" />
        {card.downloads ?? 0}
      </div>
    </div>
  </div>
</div>
{/if}