src/lib/components/community/Card.svelte

<script lang="ts">
	import { REACTION_EMOJIS } from "$lib/utils";
	import Reaction from "$lib/components/community/reactions/Reaction.svelte";
	import Add from "$lib/components/community/reactions/Add.svelte";

  $: reactions = REACTION_EMOJIS.sort(() => Math.random() - Math.random()).slice(0, 3);
</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://images.unsplash.com/photo-1682687220015-186f63b8850a?q=80&w=4075&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');"></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">
    <p class="text-white font-semibold text-base">A mini hamster in a wheat field</p>
    <p class="text-white/75 font-regular text-sm">LoRA model name</p>
  </div>
  <div class="flex items-center justify-start gap-2">
    {#each reactions as emoji}
      <Reaction emoji={emoji} count={Math.floor(Math.random() * 100)} />
    {/each}
    <Add />
  </div>
</div>