From a62525018ce38b81f23dc10a01e3c1f82224a9f7 Mon Sep 17 00:00:00 2001
From: Angel Fernando Quiroz Campos <angelfqc.18@gmail.com>
Date: Sun, 25 Feb 2024 01:07:54 -0500
Subject: [PATCH] Display: Add component to show the section header

---
 .../css/scss/organisms/_section_header.scss   |  4 +++
 .../vue/components/layout/SectionHeader.vue   | 31 +++++++++++++++++++
 2 files changed, 35 insertions(+)
 create mode 100644 assets/vue/components/layout/SectionHeader.vue

diff --git a/assets/css/scss/organisms/_section_header.scss b/assets/css/scss/organisms/_section_header.scss
index bca78d8799..4091a7e69e 100644
--- a/assets/css/scss/organisms/_section_header.scss
+++ b/assets/css/scss/organisms/_section_header.scss
@@ -9,6 +9,10 @@
     @apply pb-4;
   }
 
+  &__title {
+    @apply mr-auto;
+  }
+
   h1, h2, h3, h4, h5, h6 {
     @apply mr-auto;
   }
diff --git a/assets/vue/components/layout/SectionHeader.vue b/assets/vue/components/layout/SectionHeader.vue
new file mode 100644
index 0000000000..07b5602645
--- /dev/null
+++ b/assets/vue/components/layout/SectionHeader.vue
@@ -0,0 +1,31 @@
+<script setup>
+import { useCidReqStore } from "../../store/cidReq"
+import { storeToRefs } from "pinia"
+import StudentViewButton from "../StudentViewButton.vue"
+
+defineProps({
+  title: {
+    type: String,
+    required: true
+  }
+})
+
+const cidReqStore = useCidReqStore()
+
+const { course } = storeToRefs(cidReqStore)
+</script>
+
+<template>
+  <div class="section-header section-header--h2">
+    <h2
+      class="section-header__title"
+      v-text="title"
+    />
+
+    <StudentViewButton
+      v-if="course"
+    />
+
+    <slot />
+  </div>
+</template>