feat: implement feedback

Author: Easybuoy

packages/chakra-ui-docs/components/BottomLink.vue

@@ -2,44 +2,54 @@
   <div>
     <CFlex justify="space-between">
       <div>
-        <CLink as="router-link" :to="prev">
-          {{ prev == '' ? "" : "Prev" }}
+        <CLink as="router-link" :to="prevPath">
+          <CIcon v-show="prevName" name="chevron-left" />
+          {{ prevName == '' ? "" : prevName }}
         </CLink>
       </div>
 
-      <CLink as="router-link" :to="next">
-        {{ next == '' ? "": "Next" }}
+      <CLink as="router-link" :to="nextPath">
+        {{ nextName == '' ? "" : nextName }}
+        <CIcon v-show="nextName" name="chevron-right" />
       </CLink>
     </CFlex>
   </div>
 </template>
 
 <script>
-import { CLink, CFlex } from '@chakra-ui/vue'
+import { CLink, CFlex, CIcon } from '@chakra-ui/vue'
 import { findNextAndPrevRoute } from '../utils'
 
 export default {
   components: {
     CLink,
-    CFlex
+    CFlex,
+    CIcon
   },
   data: () => ({
-    prev: '',
-    next: ''
+    prevPath: '',
+    prevName: '',
+    nextPath: '',
+    nextName: ''
   }),
   watch: {
-    $route (to, from) {
-      const { prev, next } = findNextAndPrevRoute(to.path, this.$router.options.routes)
+    '$route.path' (nextPath) {
+      const { prev, next } = findNextAndPrevRoute(nextPath, this.$router.options.routes)
 
-      this.prev = prev
-      this.next = next
+      this.prevPath = prev.path
+      this.prevName = prev.name
+      this.nextPath = next.path
+      this.nextName = next.name
+      console.log(this.nextName)
     }
   },
   created () {
     const { prev, next } = findNextAndPrevRoute(this.$route.path, this.$router.options.routes)
 
-    this.prev = prev
-    this.next = next
+    this.prevPath = prev.path
+    this.prevName = prev.name
+    this.nextPath = next.path
+    this.nextName = next.name
   }
 }
 </script>

packages/chakra-ui-docs/utils/index.js

@@ -21,8 +21,25 @@ export const removeHyphenFromString = (hyphenatedString) => {
 export const findNextAndPrevRoute = (path, routes) => {
   const currentRouteIndex = routes.map(route => route.path).indexOf(path)
 
-  const nextPageLink = routes[currentRouteIndex + 1]
-  const prevPageLink = routes[currentRouteIndex - 1]
+  const nextPage = routes[currentRouteIndex + 1]
+  const prevPage = routes[currentRouteIndex - 1]
 
-  return { prev: prevPageLink ? prevPageLink.path : '', next: nextPageLink ? nextPageLink.path : '' }
+  const prevPageLink = prevPage
+    ? {
+      ...prevPage,
+      name: (prevPage.name =
+          prevPage.name.charAt(0).toUpperCase() + prevPage.name.slice(1))
+    }
+    : ''
+  const nextPageLink = nextPage
+    ? {
+      ...nextPage,
+      name: (nextPage.name =
+          nextPage.name.charAt(0).toUpperCase() + nextPage.name.slice(1))
+    }
+    : ''
+
+  console.log(prevPageLink)
+  console.log(nextPageLink)
+  return { prev: prevPageLink, next: nextPageLink }
 }