From 6fc3121100274fb87347fb147ca4bcee51d99721 Mon Sep 17 00:00:00 2001
From: jinhojang6 <jinho5051@gmail.com>
Date: Tue, 30 May 2023 02:10:39 +0900
Subject: [PATCH] update page nav buttons

---
 .../src/client/components/Icon/Icon.tsx       | 14 +++++++++
 .../src/client/css/custom.scss                | 21 ++++++++++++++
 .../src/client/static/icons/arrow-left.svg    |  3 ++
 .../src/client/static/icons/arrow-right.svg   |  3 ++
 .../client/theme/PaginatorNavLink/index.tsx   | 29 +++++++++++++++++++
 5 files changed, 70 insertions(+)
 create mode 100644 packages/logos-docusaurus-theme/src/client/static/icons/arrow-left.svg
 create mode 100644 packages/logos-docusaurus-theme/src/client/static/icons/arrow-right.svg
 create mode 100644 packages/logos-docusaurus-theme/src/client/theme/PaginatorNavLink/index.tsx

diff --git a/packages/logos-docusaurus-theme/src/client/components/Icon/Icon.tsx b/packages/logos-docusaurus-theme/src/client/components/Icon/Icon.tsx
index 8d2511d..a8299c4 100644
--- a/packages/logos-docusaurus-theme/src/client/components/Icon/Icon.tsx
+++ b/packages/logos-docusaurus-theme/src/client/components/Icon/Icon.tsx
@@ -6,6 +6,8 @@ import styles from './style.module.scss'
 
 import ArrowLCircleSvg from '../../static/icons/arrow-left-circle.svg'
 import ArrowRCircleSvg from '../../static/icons/arrow-right-circle.svg'
+import ArrowL from '../../static/icons/arrow-left.svg'
+import ArrowR from '../../static/icons/arrow-right.svg'
 import DiscordSvg from '../../static/icons/discord.svg'
 import DiscourseSvg from '../../static/icons/discourse.svg'
 import DotSvg from '../../static/icons/dot.svg'
@@ -60,6 +62,18 @@ export const IconArrowLeftCircle = (props: TIconProps): JSX.Element => (
   </Icon>
 )
 
+export const IconArrowRight = (props: TIconProps): JSX.Element => (
+  <Icon {...props}>
+    <ArrowR />
+  </Icon>
+)
+
+export const IconArrowLeft = (props: TIconProps): JSX.Element => (
+  <Icon>
+    <ArrowL />
+  </Icon>
+)
+
 export const IconFolder = (props: TIconProps): JSX.Element => (
   <Icon {...props}>
     <FolderSvg />
diff --git a/packages/logos-docusaurus-theme/src/client/css/custom.scss b/packages/logos-docusaurus-theme/src/client/css/custom.scss
index bc044a8..5ba0f33 100644
--- a/packages/logos-docusaurus-theme/src/client/css/custom.scss
+++ b/packages/logos-docusaurus-theme/src/client/css/custom.scss
@@ -559,6 +559,27 @@ div.w-10 > a:not(:last-child) {
   margin-left: 8px;
 }
 
+.pagination-nav__link {
+  display: flex;
+  align-items: center;
+  gap: 18px;
+  border: 1px solid rgb(var(--lsd-border-primary));
+  border-radius: 0;
+  padding: 10px 14px;
+}
+
+.pagination-nav__link--next {
+  justify-content: flex-end;
+}
+
+.pagination-nav__label::after {
+  display: none;
+}
+
+.pagination-nav__label::before {
+  display: none;
+}
+
 @include utils.responsive('lg', 'down') {
   .grid {
     grid-template-columns: repeat(2, 1fr);
diff --git a/packages/logos-docusaurus-theme/src/client/static/icons/arrow-left.svg b/packages/logos-docusaurus-theme/src/client/static/icons/arrow-left.svg
new file mode 100644
index 0000000..51142a1
--- /dev/null
+++ b/packages/logos-docusaurus-theme/src/client/static/icons/arrow-left.svg
@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.6668 6.41683H4.56766L7.8285 3.156L7.00016 2.3335L2.3335 7.00016L7.00016 11.6668L7.82266 10.8443L4.56766 7.5835H11.6668V6.41683Z" fill="white"/>
+</svg>
diff --git a/packages/logos-docusaurus-theme/src/client/static/icons/arrow-right.svg b/packages/logos-docusaurus-theme/src/client/static/icons/arrow-right.svg
new file mode 100644
index 0000000..5c92dbb
--- /dev/null
+++ b/packages/logos-docusaurus-theme/src/client/static/icons/arrow-right.svg
@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.99992 2.3335L6.17742 3.156L9.43242 6.41683H2.33325V7.5835H9.43242L6.17742 10.8443L6.99992 11.6668L11.6666 7.00016L6.99992 2.3335Z" fill="white"/>
+</svg>
diff --git a/packages/logos-docusaurus-theme/src/client/theme/PaginatorNavLink/index.tsx b/packages/logos-docusaurus-theme/src/client/theme/PaginatorNavLink/index.tsx
new file mode 100644
index 0000000..923cf7c
--- /dev/null
+++ b/packages/logos-docusaurus-theme/src/client/theme/PaginatorNavLink/index.tsx
@@ -0,0 +1,29 @@
+import React from 'react'
+import clsx from 'clsx'
+import Link from '@docusaurus/Link'
+import {
+  NavigateBeforeIcon,
+  NavigateNextIcon,
+  Typography,
+} from '@acid-info/lsd-react'
+import { IconArrowLeft, IconArrowRight } from '@logos-theme/components/Icon'
+
+export default function PaginatorNavLink(props) {
+  const { permalink, title, subLabel, isNext } = props
+
+  return (
+    <Link
+      className={clsx(
+        'pagination-nav__link',
+        isNext ? 'pagination-nav__link--next' : 'pagination-nav__link--prev',
+      )}
+      to={permalink}
+    >
+      {!isNext ? <IconArrowLeft /> : null}
+      <Typography variant="body2" className="pagination-nav__label">
+        {title}
+      </Typography>
+      {isNext ? <IconArrowRight /> : null}
+    </Link>
+  )
+}