src/lib/components/models/Card.svelte

<script lang="ts">
  import { modelStore } from "$lib/stores/use-model";
	import type { ModelCard } from "$lib/type";
	import Icon from "@iconify/svelte";
  import { goto } from "$app/navigation";
  import { page } from "$app/stores"; 

  export let card: ModelCard;

  const handleClick = async () => {
    // const request = await fetch(`/api/models/${card?.id?.replace("/", "@")}?full=true`);
    // const { model } = await request.json();
    // modelStore.set({
    //   model,
    //   open: true
    // });
    $page.url.searchParams.set('model', card?.id);
    goto(`?${$page.url.searchParams.toString()}`);
  };
</script>

<!-- svelte-ignore a11y-no-static-element-interactions -->
<!-- svelte-ignore a11y-click-events-have-key-events -->
<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?.title}" />
  </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?.title ?? 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>