src/lib/components/models/Card.svelte

<script lang="ts">
	import type { ModelCard } from "$lib/type";
	import Button from "$lib/components/Button.svelte";
	import Icon from "@iconify/svelte";

  export let card: ModelCard;
</script>
<a
  href={`/generate?model=${card.id}`}
  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-75 hover:brightness-100 z-[1]"
>
  <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 class="group-hover:opacity-100 opacity-0 translate-x-full group-hover:translate-x-0 transition-all duration-200 absolute right-3 bottom-3">
      <Button theme="light" size="md">
        Try it now
      </Button>
    </div>
  </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>
</a>