1 files changed, 40 insertions, 0 deletions
diff --git a/data/vue/Section.vue b/data/vue/Section.vue
new file mode 100644
index 0000000..c6464af
--- /dev/null
+++ b/data/vue/Section.vue
@@ -0,0 +1,40 @@
+<template>
+  <h2 @click="section_toggle" class="section_header">
+    {{ name }} <span class="section_button">{{ visible ? '-' : '+' }}</span>
+  </h2>
+  <div v-show="visible" :class="{ section_grid: grid }">
+    <slot></slot>
+  </div>
+</template>
+
+<script setup>
+import { defineProps, ref } from 'vue'
+
+const props = defineProps({ name: String, grid: Boolean })
+const visible = ref(true)
+const section_toggle = () => visible.value = !visible.value
+</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>