refactor: add DesignTitle

ludchieng · Jan 24, 2023 · 5b9522f · 5b9522f
1 parent 32c2fac
commit 5b9522f
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 21 deletions.
diff --git 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
@@ -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>