Add metadata box

frontend/components/organisms/MetadataBox.vue

@@ -0,0 +1,55 @@
+<template>
+  <v-card>
+    <v-data-table
+      :headers="headers"
+      :items="metaArray"
+      item-key="key"
+      hide-default-footer
+      disable-pagination
+      class="elevation-1"
+    >
+    </v-data-table>
+  </v-card>
+</template>
+
+<script>
+export default {
+  props: {
+    metadata: {
+      type: Object,
+      default: () => ({}),
+      required: true
+    }
+  },
+
+  data() {
+    return {
+      headers: [
+        {
+          text: 'Key',
+          align: 'left',
+          value: 'key'
+        },
+        {
+          text: 'Value',
+          align: 'left',
+          value: 'value'
+        }
+      ]
+    }
+  },
+
+  computed: {
+    metaArray() {
+      const items = []
+      for (const [key, value] of Object.entries(this.metadata)) {
+        items.push({
+          key,
+          value
+        })
+      }
+      return items
+    }
+  }
+}
+</script>