refactor: extract main bulma classes into a component

Author: renanjava

frontend/src/components/DefaultHeader.vue

@@ -9,6 +9,7 @@
     </section>
     <h1 class="title has-text-primary-00">{{ primaryText }}</h1>
     <h3 class="subtitle is-6 has-text-primary-00">{{ secondaryText }}</h3>
+    <slot></slot>
   </div>
 </template>
 

frontend/src/components/DefaultMain.vue

@@ -0,0 +1,21 @@
+<template>
+  <main class="columns is-gapless is-multiline">
+    <DefaultHeader :primaryText="'Tarefas'" :secondaryText="'Gerencie e acompanhe suas tarefas'">
+      <slot></slot>
+    </DefaultHeader>
+  </main>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import DefaultHeader from './DefaultHeader.vue'
+
+export default defineComponent({
+  name: 'DefaultMain',
+  components: {
+    DefaultHeader,
+  },
+})
+</script>
+
+<style scoped></style>

frontend/src/pages/HomePage.vue

@@ -1,23 +1,20 @@
 <script lang="ts">
-import DefaultHeader from '@/components/DefaultHeader.vue'
+import DefaultMain from '@/components/DefaultMain.vue'
 import { defineComponent } from 'vue'
 
 export default defineComponent({
   name: 'HomePage',
   components: {
-    DefaultHeader,
+    DefaultMain,
   },
 })
 </script>
 
 <template>
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.4/css/bulma.min.css" />
-  <main class="columns is-gapless is-multiline">
-    <DefaultHeader
-      :primaryText="'Boas vindas!'"
-      :secondaryText="'Visão geral do seu controle de tempo'"
-    />
-  </main>
+  <DefaultMain>
+    <h1>aslfals</h1>
+  </DefaultMain>
 </template>
 
 <style scoped></style>

frontend/src/pages/TasksPage.vue

@@ -1,18 +1,18 @@
 <template>
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.4/css/bulma.min.css" />
-  <main class="columns is-gapless is-multiline">
-    <DefaultHeader :primaryText="'Tarefas'" :secondaryText="'Gerencie e acompanhe suas tarefas'" />
-  </main>
+  <DefaultMain>
+    <h1>asodasokdoskdosak</h1>
+  </DefaultMain>
 </template>
 
 <script lang="ts">
-import DefaultHeader from '@/components/DefaultHeader.vue'
+import DefaultMain from '@/components/DefaultMain.vue'
 import { defineComponent } from 'vue'
 
 export default defineComponent({
   name: 'TasksPage',
   components: {
-    DefaultHeader,
+    DefaultMain,
   },
 })
 </script>