From 85e07598d40c35aa056df72e793355bbf0f39cbf Mon Sep 17 00:00:00 2001
From: Jordan Goulder <jordan@jordangoulder.com>
Date: Mon, 13 Jan 2025 01:03:53 -0500
Subject: [PATCH] Add property list

---
 src/components/DiskInfo.vue     |  2 ++
 src/components/PropertyList.vue | 49 +++++++++++++++++++++++++++++++++
 2 files changed, 51 insertions(+)
 create mode 100644 src/components/PropertyList.vue

diff --git a/src/components/DiskInfo.vue b/src/components/DiskInfo.vue
index ace4d88..a1663cf 100644
--- a/src/components/DiskInfo.vue
+++ b/src/components/DiskInfo.vue
@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import { computed } from 'vue'
 import { getBiosParameterBlock } from '@/floppy/disk.ts'
+import PropertyList from '@/components/PropertyList.vue'
 
 const { data = new ArrayBuffer(0) } = defineProps<{ data: ArrayBuffer }>()
 
@@ -12,6 +13,7 @@ const biosParameterBlock = computed(() => {
 <template>
   <section v-if="biosParameterBlock">
     <h3>BIOS Parameter Block (BPB)</h3>
+    <PropertyList :obj="biosParameterBlock" />
     <pre>{{ biosParameterBlock }}</pre>
   </section>
 </template>
diff --git a/src/components/PropertyList.vue b/src/components/PropertyList.vue
new file mode 100644
index 0000000..9be3b29
--- /dev/null
+++ b/src/components/PropertyList.vue
@@ -0,0 +1,49 @@
+<script lang="ts" setup>
+const { obj = {} } = defineProps<{ obj: { [index: string]: unknown } }>()
+</script>
+
+<template>
+  <table>
+    <thead>
+      <tr>
+        <th>Property</th>
+        <th>Value</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr v-for="property in Object.keys(obj)" :key="property">
+        <td>
+          <span>{{ property }}</span>
+        </td>
+        <td>
+          <span>{{ obj[property] }}</span>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</template>
+
+<style scoped>
+table {
+  background-color: white;
+  border-collapse: collapse;
+}
+
+td,
+th {
+  padding: 0.25em 0.5em;
+  border: 1px solid black;
+}
+
+td:first-child,
+th:first-child {
+  text-align: right;
+}
+
+td:last-child span {
+  white-space: pre;
+  margin: 0.5em;
+  background: black;
+  color: white;
+}
+</style>