first draft of openenings content in html

src/components/Content.vue

@@ -0,0 +1,51 @@
+<template>
+  <div
+    id="content"
+    @click.prevent="close"
+    @keydown.enter.prevent="close"
+  >
+    <div class="wrapper">
+      <header>
+        <span class="close-btn"
+        @click.prevent="close"
+        @keydown.enter.prevent="close"
+        >x</span>
+        <h1>{{ data.Name }}</h1>
+      </header>
+      <section>
+        <div v-if="data.Text" class="text">
+          {{ data.Text }}
+        </div>
+        <ul v-if="data.Media && data.Media.length">
+          <li v-for="(item, index) in data.Media" :key="index">
+            <img :src="'https://api.anarchive-muntadas.figli.io'+item.url" alt="">
+          </li>
+        </ul>
+      </section>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Content',
+  props: {
+    data: Object
+  },
+  data: () => ({
+
+  }),
+  created () {
+    console.log('Content created', this.data)
+  },
+  methods: {
+    close () {
+      console.log('close content')
+      this.$emit('onClose')
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+</style>