src/lib/components/community/Card.svelte

<script lang="ts">
	import Add from "$lib/components/community/reactions/Add.svelte";
	import type { CommunityCard } from "$lib/type";
	import Reactions from "./reactions/Reactions.svelte";

  export let card: CommunityCard;
  </script>

<div
  class="cursor-pointer group bg-neutral-700 rounded-xl h-[310px] relative flex items-start justify-between flex-col p-5 transition-all duration-200 brightness-75 hover:brightness-100 z-[1]"
>
  <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('https://huggingface.co/datasets/enzostvs/loras-studio/resolve/main/{card.image}?expose=true');"></div>
  </div>
  <div class="bg-black/40 backdrop-blur-sm border border-white/30 rounded-lg px-6 py-3 text-white transition-all duration-200 opacity-0 group-hover:opacity-100 w-full">
    <p class="text-white font-semibold text-base">{card.prompt}</p>
    <p class="text-white/75 font-regular text-sm">{card.model.id}</p>
  </div>
  <div class="flex items-center justify-start gap-2">
    {#if card.reactions.length > 0}
      <Reactions reactions={card.reactions} />
    {/if}
    <Add count={card?.reactions?.length} />
  </div>
</div>