33 lines
913 B
Svelte
33 lines
913 B
Svelte
<script lang="ts">
|
|
let { pet }: {
|
|
pet: {
|
|
id: number;
|
|
name: string;
|
|
slug: string;
|
|
species: string;
|
|
breed: string | null;
|
|
age: string | null;
|
|
sex: string;
|
|
photoUrl: string | null;
|
|
};
|
|
} = $props();
|
|
</script>
|
|
|
|
<a href="/pets/{pet.slug}" class="group block bg-white rounded-xl shadow-sm overflow-hidden hover:shadow-md transition">
|
|
<div class="aspect-[4/3] bg-gray-200 overflow-hidden">
|
|
{#if pet.photoUrl}
|
|
<img src={pet.photoUrl} alt={pet.name} class="w-full h-full object-cover group-hover:scale-105 transition duration-300" />
|
|
{:else}
|
|
<div class="w-full h-full flex items-center justify-center text-gray-400 text-4xl">🐾</div>
|
|
{/if}
|
|
</div>
|
|
<div class="p-4">
|
|
<h3 class="font-bold text-lg text-gray-900">{pet.name}</h3>
|
|
<p class="text-sm text-gray-500">
|
|
{pet.breed || pet.species}
|
|
{#if pet.age} · {pet.age}{/if}
|
|
· {pet.sex}
|
|
</p>
|
|
</div>
|
|
</a>
|