waveterm/docusaurus-og
0
0
Fork 0
mirror of https://github.com/wavetermdev/docusaurus-og.git synced 2026-08-05 13:46:35 -07:00
Code Issues Packages Projects Releases Wiki Activity

update page nav buttons

Browse Source
This commit is contained in:
jinhojang6
2023-05-30 02:10:39 +09:00
parent 6da8abc954
commit 6fc3121100
5 changed files with 70 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/logos-docusaurus-theme/src/client/components/Icon/Icon.tsx
+14
View File
@@ -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 />
packages/logos-docusaurus-theme/src/client/css/custom.scss
+21
View File
@@ -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);
packages/logos-docusaurus-theme/src/client/static/icons/arrow-left.svg
+3
View File
@@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 260 B

packages/logos-docusaurus-theme/src/client/static/icons/arrow-right.svg
+3
View File
@@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 261 B

packages/logos-docusaurus-theme/src/client/theme/PaginatorNavLink/index.tsx
+29
View File
@@ -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>
)
}