redirect to bibdle.dev and components

src/lib/components/GuessesTable.svelte

@@ -0,0 +1,66 @@
+<script lang="ts">
+	interface Guess {
+		book: {
+			id: string;
+			name: string;
+			testament: string;
+			section: string;
+		};
+		testamentMatch: boolean;
+		sectionMatch: boolean;
+		adjacent: boolean;
+	}
+
+	let {
+		guesses,
+		correctBookId,
+	}: { guesses: Guess[]; correctBookId: string } = $props();
+</script>
+
+<div class="bg-white rounded-2xl shadow-xl overflow-x-auto">
+	<table class="w-full">
+		<thead>
+			<tr class="bg-linear-to-r from-gray-50 to-gray-300">
+				<th
+					class="p-3 sm:p-4 md:p-4 text-left text-md sm:text-base md:text-md text-gray-700 border-b border-gray-200"
+					>Book</th
+				>
+				<th
+					class="p-3 sm:p-4 md:p-4 text-left text-md sm:text-base md:text-md text-gray-700 border-b border-gray-200"
+					>Testament</th
+				>
+				<th
+					class="p-3 sm:p-4 md:p-4 text-left text-md sm:text-base md:text-md text-gray-700 border-b border-gray-200"
+					>Section</th
+				>
+			</tr>
+		</thead>
+		<tbody>
+			{#each guesses as guess (guess.book.id)}
+				<tr
+					class="border-b border-gray-100 hover:bg-gray-50 transition-colors"
+				>
+					<td
+						class="p-3 sm:p-4 md:p-6 text-sm sm:text-base font-bold md:text-lg"
+					>
+						{guess.book.id === correctBookId ? "✅" : "❌"}
+						{guess.book.name}
+					</td>
+					<td
+						class="p-3 sm:p-4 md:p-6 text-sm sm:text-base md:text-lg"
+					>
+						{guess.testamentMatch ? "✅" : "🟥"}
+						{guess.book.testament.charAt(0).toUpperCase() +
+							guess.book.testament.slice(1).toLowerCase()}
+					</td>
+					<td
+						class="p-3 sm:p-4 md:p-6 text-sm sm:text-base md:text-lg"
+					>
+						{guess.sectionMatch ? "✅" : "🟥"}
+						{guess.adjacent ? "‼️ " : ""}{guess.book.section}
+					</td>
+				</tr>
+			{/each}
+		</tbody>
+	</table>
+</div>