1 files changed, 47 insertions, 0 deletions
diff --git a/data/vue/Section.vue b/data/vue/Section.vue
new file mode 100644
index 0000000..f0202c0
--- /dev/null
+++ b/data/vue/Section.vue
@@ -0,0 +1,47 @@
+<template>
+  <h2 class="section_header" @click="section_toggle_visible">
+    {{ name }} <span class="section_button">{{ visible ? '-' : '+' }}</span>
+  </h2>
+  <div :class="{ section_grid: grid }" v-if="visible">
+    <slot></slot>
+  </div>
+</template>
+
+<script setup>
+import { defineProps, inject, ref } from 'vue'
+
+const props = defineProps({ name: String, grid: Boolean, visible: Boolean, triggers_reload: Boolean })
+const visible = ref(props.visible)
+const trigger_reload = inject('trigger_reload')
+
+const section_toggle_visible = () => {
+  visible.value = !visible.value
+  if (props.triggers_reload) trigger_reload()
+}
+
+defineExpose({ visible })
+</script>
+
+<style>
+.section_header {
+  border-bottom: 1px solid #586e75;
+  cursor: pointer;
+  font-size: 18px;
+  font-weight: normal;
+}
+
+.section_button {
+  font-family: monospace;
+}
+
+.section_grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+}
+
+@media screen and (max-width: 800px) {
+  .section_grid {
+    grid-template-columns: 1fr;
+  }
+}
+</style>