From 5b9522f8c3d521ea06412ea368e23d42aa26a10c Mon Sep 17 00:00:00 2001
From: ludchieng <lud.chieng@hotmail.fr>
Date: Tue, 24 Jan 2023 23:17:19 +0100
Subject: [PATCH] refactor: add DesignTitle

---
 src/components/Timetables/TimetablesHome.vue | 38 +++++++++-----------
 src/components/design/DesignTitle.vue        | 31 ++++++++++++++++
 2 files changed, 48 insertions(+), 21 deletions(-)
 create mode 100644 src/components/design/DesignTitle.vue

diff --git a/src/components/Timetables/TimetablesHome.vue b/src/components/Timetables/TimetablesHome.vue
index 4076c57..63e5d71 100644
--- a/src/components/Timetables/TimetablesHome.vue
+++ b/src/components/Timetables/TimetablesHome.vue
@@ -1,16 +1,21 @@
 <template>
   <div class="tab-page-new">
-    <div v-for="category in linesByCategory" :key="category.name">
-      <h2>{{ category.name }}</h2>
-      <hr />
-      <router-link v-for="line in category.lines" :key="line.slugName"
-        class="icon-line" :to="`/timetables/${$route.params.tab}/${line.slugName}`"
+    <div
+      v-for="category in linesByCategory"
+      :key="category.name"
+    >
+      <DesignTitle>{{ category.name }}</DesignTitle>
+      <router-link
+        v-for="line in category.lines"
+        :key="line.slugName"
+        class="icon-line"
+        :to="`/timetables/${$route.params.tab}/${line.slugName}`"
       >
         <LineIcon
-          :lineSlugName="line.slugName"
+          :line-slug-name="line.slugName"
           color="dark"
           size="lg"
-          fadeIn
+          fade-in
         />
       </router-link>
     </div>
@@ -21,10 +26,14 @@
 import Vue from 'vue'
 import LineIcon from '@/components/LineIcon.vue'
 import { getLinesByCategory } from '@/utils/localstore/lines'
+import DesignTitle from '@/components/design/DesignTitle.vue'
 
 export default Vue.extend({
   name: 'TimetablesHome',
-  components: { LineIcon },
+  components: {
+    LineIcon,
+    DesignTitle,
+  },
   computed: {
     linesByCategory () {
       return getLinesByCategory()
@@ -38,19 +47,6 @@ export default Vue.extend({
   padding: 1rem;
 }
 
-h2 {
-  font-size: 1.1rem;
-  margin: 2rem 0 0.1rem 0;
-}
-
-hr {
-  margin: 0;
-  height: 2px;
-  max-width: 15rem;
-  background-color: #2f2f2f;
-  border: 0;
-}
-
 .icon-line {
   display: inline-block;
   margin: 1rem 1rem 0 0;
diff --git a/src/components/design/DesignTitle.vue b/src/components/design/DesignTitle.vue
new file mode 100644
index 0000000..3183b75
--- /dev/null
+++ b/src/components/design/DesignTitle.vue
@@ -0,0 +1,31 @@
+<template>
+  <div>
+    <h2>
+      <slot />
+    </h2>
+    <hr>
+  </div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+
+export default Vue.extend({
+  name: 'DesignTitle',
+})
+</script>
+
+<style scoped>
+h2 {
+  font-size: 1.1rem;
+  margin: 2rem 0 0.1rem 0;
+}
+
+hr {
+  margin: 0;
+  height: 2px;
+  max-width: 15rem;
+  background-color: #2f2f2f;
+  border: 0;
+}
+</style>