From b3d43aa800207a11420aa722ea09de076b27a08c Mon Sep 17 00:00:00 2001
From: Angel Fernando Quiroz Campos <1697880+AngelFQC@users.noreply.github.com>
Date: Wed, 5 Feb 2025 18:10:35 -0500
Subject: [PATCH] Display: Simply MyCourses component

---
 assets/vue/layouts/MyCourses.vue | 31 +++++++++++++------------------
 1 file changed, 13 insertions(+), 18 deletions(-)

diff --git a/assets/vue/layouts/MyCourses.vue b/assets/vue/layouts/MyCourses.vue
index 0dafe63fe96..513e65d09a0 100644
--- a/assets/vue/layouts/MyCourses.vue
+++ b/assets/vue/layouts/MyCourses.vue
@@ -1,30 +1,25 @@
 <template>
-  <div class="flex justify-between items-center">
-    <h2 v-t="'My courses'" />
-    <Button
-      v-if="isTeacher"
-      :label="t('Course')"
-      class="p-button-secondary hidden md:inline-flex"
-      icon="pi pi-plus"
-      @click="redirectToCreateCourse"
-    />
-  </div>
-  <hr />
+  <SectionHeader :title="t('My courses')">
+    <BaseAppLink :to="{ name: 'CourseCreate' }">
+      <BaseButton
+        v-if="isTeacher"
+        type="secondary"
+        icon="plus"
+        :label="t('Course')"
+      />
+    </BaseAppLink>
+  </SectionHeader>
   <router-view />
 </template>
 
 <script setup>
-import Button from "primevue/button"
 import { useI18n } from "vue-i18n"
 import { storeToRefs } from "pinia"
 import { useSecurityStore } from "../store/securityStore"
-import { useRouter } from "vue-router"
+import SectionHeader from "../components/layout/SectionHeader.vue"
+import BaseButton from "../components/basecomponents/BaseButton.vue"
+import BaseAppLink from "../components/basecomponents/BaseAppLink.vue"
 
 const { t } = useI18n()
 const { isTeacher } = storeToRefs(useSecurityStore())
-const router = useRouter()
-
-const redirectToCreateCourse = () => {
-  router.push({ name: "CourseCreate" })
-}
 </script>