src/lib/components/community/Card.svelte

<script lang="ts">
  import { env } from "$env/dynamic/public";
  import { goto } from "$app/navigation";
  import { page } from "$app/stores"; 
  
	import type { CommunityCard } from "$lib/type";
  import { galleryStore } from "$lib/stores/use-gallery";
	import Reactions from "./reactions/Reactions.svelte";

  export let card: CommunityCard;
  export let form: Record<string, string>;

  const handleClick = async () => {
    const request = await fetch(`/api/community/${card?.id}?${new URLSearchParams(form)}`);
    const { gallery, next, previous } = await request.json();
    galleryStore.set({
      gallery,
      open: true,
      next,
      previous
    });

    $page.url.searchParams.set('gallery', 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="cursor-pointer group bg-neutral-700 rounded-xl h-[400px] relative flex items-start justify-between flex-col p-5 transition-all duration-200 brightness-90 hover:brightness-100 z-[1] overflow-hidden"
  on:click={handleClick}
>
  <div class="w-full h-full absolute top-0 left-0 -z-[1] rounded-xl overflow-hidden">
    <div class="w-full h-full bg-center bg-cover transition-all duration-200 group-hover:scale-110 " style="background-image: url('{env.PUBLIC_FILE_UPLOAD_DIR}/{card.image}');"></div>
  </div>
  <div class="group-hover:opacity-100 opacity-0 translate-y-full group-hover:translate-y-0 transition-all duration-200 flex flex-col gap-4 w-full">
    <div class="bg-black/40 backdrop-blur-sm border border-white/30 rounded-lg px-6 py-3 text-white transition-all duration-200 w-full">
      <p class="text-white font-semibold text-lg">{card.prompt}</p>
      <p class="text-white/75 font-regular text-base">{card.model.id}</p>
    </div>
  </div>
  <Reactions reactions={card.reactions} gallery_id={card.id} />
</div>