Add property list

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>

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>