<script lang="ts"> import type { CommunityCard } from "$lib/type"; import Button from "$lib/components/Button.svelte"; import Reactions from "./reactions/Reactions.svelte"; export let card: CommunityCard; </script> <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-75 hover:brightness-100 z-[1] overflow-hidden" > <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="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> <Button theme="light" size="md" href={`/generate?model=${card.model.id}`}> Try it now </Button> </div> <div class="flex items-center justify-start gap-2"> <Reactions reactions={card.reactions} gallery_id={card.id} /> </div> </div>