refactor: add DesignPrevNext

ludchieng · Jan 24, 2023 · e8a2ab4 · e8a2ab4
1 parent b18be8c
commit e8a2ab4
Show file tree

Hide file tree

Showing 2 changed files with 102 additions and 55 deletions.
diff --git a/src/components/Stop/StopPrevNextStops.vue b/src/components/Stop/StopPrevNextStops.vue
@@ -1,33 +1,27 @@
 <template>
-  <div class="prev-next-stops">
-    <ul>
-      <li v-for="(prevStop, i) in stop.prevStops.slice().reverse()" :key="i" class="prev-stops">
-        <router-link :to="`/timetables/${$route.params.tab}/${$route.params.line}/${prevStop}`">
-          <span>
-            {{ getStop($route.params.line, prevStop).displayName }}
-          </span>
-        </router-link>
-      </li>
-    </ul>
-    <ul>
-      <li v-for="(nextStop, i) in stop.nextStops.slice().reverse()" :key="i" class="next-stops">
-        <router-link :to="`/timetables/${$route.params.tab}/${$route.params.line}/${nextStop}`">
-          <span>
-            {{ getStop($route.params.line, nextStop).displayName }}
-          </span>
-        </router-link>
-      </li>
-    </ul>
-  </div>
+  <DesignPrevNext
+    :prevItems="stop.prevStops.slice().reverse().map(prevStop => ({
+      label: getStop($route.params.line, prevStop).displayName,
+      link: `/timetables/${$route.params.tab}/${$route.params.line}/${prevStop}`,
+    }))"
+    :nextItems="stop.nextStops.slice().reverse().map(nextStop => ({
+      label: getStop($route.params.line, nextStop).displayName,
+      link: `/timetables/${$route.params.tab}/${$route.params.line}/${nextStop}`,
+    }))"
+  />
 </template>
 
 <script lang="ts">
 import Vue, { PropType } from 'vue'
 import { StopType } from '@/utils/parser'
 import { getStop } from '@/utils/localstore/stops'
+import DesignPrevNext from '@/components/design/DesignPrevNext.vue'
 
 export default Vue.extend({
   name: 'StopPrevNextStops',
+  components: {
+    DesignPrevNext,
+  },
   props: {
     stop: {} as PropType<StopType>,
   },
@@ -38,39 +32,4 @@ export default Vue.extend({
 </script>
 
 <style scoped>
-.prev-next-stops {
-  display: flex;
-  margin-top: 1rem;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.prev-next-stops ul {
-  width: 49%;
-}
-
-.prev-next-stops li a {
-  display: flex;
-  padding: 0.8rem 0;
-  margin-bottom: 0.5rem;
-  font-size: 0.95rem;
-  background-color: #dfdfdf;
-  border-radius: 0.4rem;
-  text-align: center;
-}
-.prev-next-stops a span {
-  display: inline-block;
-  width: 100%;
-  padding: 0.1rem 0.3rem 0 0.3rem;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.prev-stops a::before {
-  content: '〈';
-}
-.next-stops a::after {
-  content: '〉';
-}
 </style>
diff --git a/src/components/design/DesignPrevNext.vue b/src/components/design/DesignPrevNext.vue
@@ -0,0 +1,88 @@
+<template>
+  <div class="prev-next">
+    <ul class="prev-list-items">
+      <li
+        v-for="({ label, link }, i) in prevItems"
+        :key="i"
+        class="prev"
+      >
+        <router-link :to="link">
+          <span class="label">
+            {{ label }}
+          </span>
+        </router-link>
+      </li>
+    </ul>
+    <ul class="next-list-items">
+      <li
+        v-for="({ label, link }, i) in nextItems"
+        :key="i"
+        class="next"
+      >
+        <router-link :to="link">
+          <span class="label">
+            {{ label }}
+          </span>
+        </router-link>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script lang="ts">
+import Vue, { PropType } from 'vue'
+
+export type PrevNextItem = {
+  label: string,
+  link: string,
+}
+
+export default Vue.extend({
+  name: 'DesignPrevNext',
+  props: {
+    prevItems: [] as PropType<PrevNextItem[]>,
+    nextItems: [] as PropType<PrevNextItem[]>,
+  },
+})
+</script>
+
+<style scoped>
+.prev-next {
+  display: flex;
+  margin-top: 1rem;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.prev-list-items,
+.next-list-items {
+  width: calc(50% - 0.25rem);
+}
+
+.prev a,
+.next a {
+  display: flex;
+  padding: 0.8rem 0;
+  margin-bottom: 0.5rem;
+  font-size: 0.95rem;
+  background-color: #dfdfdf;
+  border-radius: 0.4rem;
+  text-align: center;
+}
+
+.prev a::before {
+  content: '〈';
+}
+.next a::after {
+  content: '〉';
+}
+
+.label {
+  display: inline-block;
+  width: 100%;
+  padding: 0.1rem 0.3rem 0 0.3rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+</style>