From 15c52a30d7ef4203113b252b718dc6dc18e22237 Mon Sep 17 00:00:00 2001
From: Benjamin Palko <benjaminpalko@hotmail.com>
Date: Sat, 8 Feb 2025 21:06:05 -0500
Subject: [PATCH] fix error

---
 .../Residents/ResidentTable.stories.svelte     | 11 +++++++++--
 .../components/Residents/ResidentTable.svelte  | 18 ++++++++++--------
 2 files changed, 19 insertions(+), 10 deletions(-)

diff --git a/src/lib/components/Residents/ResidentTable.stories.svelte b/src/lib/components/Residents/ResidentTable.stories.svelte
index b71c898..90875fd 100644
--- a/src/lib/components/Residents/ResidentTable.stories.svelte
+++ b/src/lib/components/Residents/ResidentTable.stories.svelte
@@ -6,7 +6,6 @@
 	const { Story } = defineMeta({
 		title: 'Residents/Resident Table',
 		component: ResidentTable,
-		argTypes: {},
 	});
 </script>
 
@@ -17,5 +16,13 @@
 <Story
 	name="Default"
 	children={template}
-	args={{ items: [{ name: 'Resident 1', phoneNumber: '111-1111' }] }}
+	args={{
+		items: [
+			{
+				id: '99fc03e9-3ed1-4047-b9ad-0bf2a9025eaa',
+				name: 'Resident 1',
+				phoneNumber: '111-1111',
+			},
+		],
+	}}
 />
diff --git a/src/lib/components/Residents/ResidentTable.svelte b/src/lib/components/Residents/ResidentTable.svelte
index cf5cc3f..b9a9261 100644
--- a/src/lib/components/Residents/ResidentTable.svelte
+++ b/src/lib/components/Residents/ResidentTable.svelte
@@ -5,7 +5,7 @@
 	import { twMerge } from 'tailwind-merge';
 
 	type Props = {
-		items: Pick<Resident, 'id' | 'name' | 'phoneNumber'>[];
+		items?: Pick<Resident, 'id' | 'name' | 'phoneNumber'>[];
 	} & Omit<SvelteHTMLElements['table'], 'children'>;
 
 	let { items, class: className, ...props }: Props = $props();
@@ -22,12 +22,14 @@
 	</thead>
 	<tbody>
 		<!-- items -->
-		{#each items as resident, index (resident.id)}
-			<tr class="hover">
-				<th>{index + 1}</th>
-				<td>{resident.name}</td>
-				<td>{resident.phoneNumber}</td>
-			</tr>
-		{/each}
+		{#if items}
+			{#each items as resident, index (resident.id)}
+				<tr class="hover">
+					<th>{index + 1}</th>
+					<td>{resident.name}</td>
+					<td>{resident.phoneNumber}</td>
+				</tr>
+			{/each}
+		{/if}
 	</tbody>
 </table>