Add view for showing contact details.

ts/components/ReviewContactColumnDetail.vue

@@ -1,3 +1,40 @@
 <template>
-	<p>detail</p>
+	<div v-if="contact">
+		<div class="card shadow-sm mb-3">
+			<div class="card-header bg-white pane-header">
+				Contact '{{ contact.name }}'
+			</div>
+			<div class="card-body">
+				<div v-if="contact.emails.length > 0">
+					<ul>
+						<li v-for="(email, index) in contact.emails">{{ email }}</li>
+					</ul>
+				</div>
+				<div v-else>
+					<p>No email addresses</p>
+				</div>
+				<div v-if="contact.phones.length > 0">
+					<ul>
+						<li v-for="(phone, index) in contact.phones">
+							{{ phone.e164 }} {{ phone.can_sms }}
+						</li>
+					</ul>
+				</div>
+				<div v-else>
+					<p>No phone numbers</p>
+				</div>
+			</div>
+		</div>
+	</div>
+	<div v-else>
+		<p>select a contact</p>
+	</div>
 </template>
+<script setup lang="ts">
+import { Contact } from "@/type/api";
+
+interface Props {
+	contact?: Contact;
+}
+const props = defineProps<Props>();
+</script>