From 2f7cb41c9d2afc2e82ececc7b10ede2ece4483b5 Mon Sep 17 00:00:00 2001
From: Yangshun <tay.yang.shun@gmail.com>
Date: Mon, 17 Jan 2022 09:24:00 +0800
Subject: [PATCH] fix: update swizzled DocPaginator component

---
 website/src/theme/DocPaginator/index.js     | 21 +++++++--------------
 website/src/theme/PaginatorNavLink/index.js | 12 ++++++++++++
 2 files changed, 19 insertions(+), 14 deletions(-)
 create mode 100644 website/src/theme/PaginatorNavLink/index.js

diff --git a/website/src/theme/DocPaginator/index.js b/website/src/theme/DocPaginator/index.js
index a3fcd052..48f36d2b 100644
--- a/website/src/theme/DocPaginator/index.js
+++ b/website/src/theme/DocPaginator/index.js
@@ -8,8 +8,7 @@ import React from 'react';
 import Translate, {translate} from '@docusaurus/Translate';
 import SidebarAd from '../../components/SidebarAd';
 
-function DocPaginator(props) {
-  const {metadata} = props;
+function DocPaginator({previous, next}) {
   return (
     <>
       <nav
@@ -20,10 +19,8 @@ function DocPaginator(props) {
           description: 'The ARIA label for the docs pagination',
         })}>
         <div className="pagination-nav__item">
-          {metadata.previous && (
-            <a
-              className="pagination-nav__link"
-              href={metadata.previous.permalink}>
+          {previous && (
+            <a className="pagination-nav__link" href={previous.permalink}>
               <div className="pagination-nav__sublabel">
                 <Translate
                   id="theme.docs.paginator.previous"
@@ -31,15 +28,13 @@ function DocPaginator(props) {
                   Previous
                 </Translate>
               </div>
-              <div className="pagination-nav__label">
-                &laquo; {metadata.previous.title}
-              </div>
+              <div className="pagination-nav__label">{previous.title}</div>
             </a>
           )}
         </div>
         <div className="pagination-nav__item pagination-nav__item--next">
-          {metadata.next && (
-            <a className="pagination-nav__link" href={metadata.next.permalink}>
+          {next && (
+            <a className="pagination-nav__link" href={next.permalink}>
               <div className="pagination-nav__sublabel">
                 <Translate
                   id="theme.docs.paginator.next"
@@ -47,9 +42,7 @@ function DocPaginator(props) {
                   Next
                 </Translate>
               </div>
-              <div className="pagination-nav__label">
-                {metadata.next.title} &raquo;
-              </div>
+              <div className="pagination-nav__label">{next.title}</div>
             </a>
           )}
         </div>
diff --git a/website/src/theme/PaginatorNavLink/index.js b/website/src/theme/PaginatorNavLink/index.js
new file mode 100644
index 00000000..857b7622
--- /dev/null
+++ b/website/src/theme/PaginatorNavLink/index.js
@@ -0,0 +1,12 @@
+import React from 'react';
+
+function PaginatorNavLink({permalink, title, subLabel}) {
+  return (
+    <a className="pagination-nav__link" href={permalink}>
+      {subLabel && <div className="pagination-nav__sublabel">{subLabel}</div>}
+      <div className="pagination-nav__label">{title}</div>
+    </a>
+  );
+}
+
+export default PaginatorNavLink;