initial commit

packages/frontend/components/PeopleListRow.vue

@@ -0,0 +1,34 @@
+<script setup lang='ts'>
+import { type Person } from '~/types/yale';
+import { type PropType } from 'vue';
+
+const props = defineProps({
+    person: {
+        type: Object as PropType<Person>,
+        required: true
+    }
+});
+
+const emit = defineEmits<{
+    (e: "delete-person", id: number): void
+}>();
+
+// Handle the clear code button click
+const handleDeletePersonClick = () => {
+    // Emit the event to the parent component
+    emit("delete-person", props.person.id);
+}
+</script>
+
+<template>
+    <tr scope="row">
+        <td>{{ person.id }}</td>
+        <td>{{ person.name }}</td>
+        <td>{{ person.phoneNumber }}</td>
+        <td class="flex">
+            <YaleButton type="button" @click="handleDeletePersonClick">
+                <IconTrash />
+            </YaleButton>
+        </td>
+    </tr>
+</template>