feat: add public site components (header, footer, pet card, sponsors, etc.)

2026-03-26 12:03:11 -05:00
parent 7f7d4870d0
commit a30205fa28
7 changed files with 235 additions and 0 deletions
@@ -0,0 +1,32 @@
+<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} &middot; {pet.age}{/if}
+			&middot; {pet.sex}
+		</p>
+	</div>
+</a>