Yangshun Tay
3 years ago
parent
41de7b8a19
commit
bbefdc4bf0
@ -0,0 +1,47 @@
|
||||
import React from 'react';
|
||||
import clsx from 'clsx';
|
||||
import {ThemeClassNames} from '@docusaurus/theme-common';
|
||||
import {useDoc} from '@docusaurus/theme-common/internal';
|
||||
import Heading from '@theme/Heading';
|
||||
import MDXContent from '@theme/MDXContent';
|
||||
/**
|
||||
Title can be declared inside md content or declared through
|
||||
front matter and added manually. To make both cases consistent,
|
||||
the added title is added under the same div.markdown block
|
||||
See https://github.com/facebook/docusaurus/pull/4882#issuecomment-853021120
|
||||
|
||||
We render a "synthetic title" if:
|
||||
- user doesn't ask to hide it with front matter
|
||||
- the markdown content does not already contain a top-level h1 heading
|
||||
*/
|
||||
function useSyntheticTitle() {
|
||||
const {metadata, frontMatter, contentTitle} = useDoc();
|
||||
const shouldRender =
|
||||
!frontMatter.hide_title && typeof contentTitle === 'undefined';
|
||||
if (!shouldRender) {
|
||||
return null;
|
||||
}
|
||||
return metadata.title;
|
||||
}
|
||||
export default function DocItemContent({children}) {
|
||||
const syntheticTitle = useSyntheticTitle();
|
||||
return (
|
||||
<div className={clsx(ThemeClassNames.docs.docMarkdown, 'markdown')}>
|
||||
{syntheticTitle && (
|
||||
<header>
|
||||
<Heading as="h1">{syntheticTitle}</Heading>
|
||||
</header>
|
||||
)}
|
||||
<div className="margin-bottom--lg">
|
||||
<iframe
|
||||
src="https://ghbtns.com/github-btn.html?user=yangshun&repo=tech-interview-handbook&type=star&count=true&size=large"
|
||||
frameBorder={0}
|
||||
width={160}
|
||||
height={30}
|
||||
title="GitHub Stars"
|
||||
/>
|
||||
</div>
|
||||
<MDXContent>{children}</MDXContent>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -0,0 +1,59 @@
|
||||
import React from 'react';
|
||||
import clsx from 'clsx';
|
||||
import {useWindowSize} from '@docusaurus/theme-common';
|
||||
import {useDoc} from '@docusaurus/theme-common/internal';
|
||||
import DocItemPaginator from '@theme/DocItem/Paginator';
|
||||
import DocVersionBanner from '@theme/DocVersionBanner';
|
||||
import DocVersionBadge from '@theme/DocVersionBadge';
|
||||
import DocItemFooter from '@theme/DocItem/Footer';
|
||||
import DocItemTOCMobile from '@theme/DocItem/TOC/Mobile';
|
||||
import DocItemTOCDesktop from '@theme/DocItem/TOC/Desktop';
|
||||
import DocItemContent from '@theme/DocItem/Content';
|
||||
import DocBreadcrumbs from '@theme/DocBreadcrumbs';
|
||||
import styles from './styles.module.css';
|
||||
import SidebarAd from '../../../components/SidebarAd';
|
||||
|
||||
/**
|
||||
* Decide if the toc should be rendered, on mobile or desktop viewports
|
||||
*/
|
||||
function useDocTOC() {
|
||||
const {frontMatter, toc} = useDoc();
|
||||
const windowSize = useWindowSize();
|
||||
const hidden = frontMatter.hide_table_of_contents;
|
||||
const canRender = !hidden && toc.length > 0;
|
||||
const mobile = canRender ? <DocItemTOCMobile /> : undefined;
|
||||
const desktop =
|
||||
canRender && (windowSize === 'desktop' || windowSize === 'ssr') ? (
|
||||
<DocItemTOCDesktop />
|
||||
) : undefined;
|
||||
return {
|
||||
hidden,
|
||||
mobile,
|
||||
desktop,
|
||||
};
|
||||
}
|
||||
export default function DocItemLayout({children}) {
|
||||
const docTOC = useDocTOC();
|
||||
return (
|
||||
<div className="row">
|
||||
<div className={clsx('col', !docTOC.hidden && styles.docItemCol)}>
|
||||
<DocVersionBanner />
|
||||
<div className={styles.docItemContainer}>
|
||||
<article>
|
||||
<DocBreadcrumbs />
|
||||
<DocVersionBadge />
|
||||
{docTOC.mobile}
|
||||
<DocItemContent>{children}</DocItemContent>
|
||||
<DocItemFooter />
|
||||
</article>
|
||||
<DocItemPaginator />
|
||||
{/* TIH: Add sidebar */}
|
||||
<div className="margin-top--md">
|
||||
<SidebarAd position="docs_bottom" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{docTOC.desktop && <div className="col col--3">{docTOC.desktop}</div>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -0,0 +1,17 @@
|
||||
/* TIH: Add horizontal padding */
|
||||
@media (min-width: 768px) {
|
||||
.docItemContainer {
|
||||
padding: 0 3rem;
|
||||
}
|
||||
}
|
||||
|
||||
.docItemContainer header + *,
|
||||
.docItemContainer article > *:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
@media (min-width: 997px) {
|
||||
.docItemCol {
|
||||
max-width: 75% !important;
|
||||
}
|
||||
}
|
||||
@ -1,138 +0,0 @@
|
||||
// Swizzled to make TOC column wider.
|
||||
import React from 'react';
|
||||
import clsx from 'clsx';
|
||||
import DocPaginator from '@theme/DocPaginator';
|
||||
import DocVersionBanner from '@theme/DocVersionBanner';
|
||||
import DocVersionBadge from '@theme/DocVersionBadge';
|
||||
import DocItemFooter from '@theme/DocItemFooter';
|
||||
import TOC from '@theme/TOC';
|
||||
import TOCCollapsible from '@theme/TOCCollapsible';
|
||||
import Heading from '@theme/Heading';
|
||||
import styles from './styles.module.css';
|
||||
import {
|
||||
PageMetadata,
|
||||
HtmlClassNameProvider,
|
||||
ThemeClassNames,
|
||||
useWindowSize,
|
||||
} from '@docusaurus/theme-common';
|
||||
import DocBreadcrumbs from '@theme/DocBreadcrumbs';
|
||||
import MDXContent from '@theme/MDXContent';
|
||||
|
||||
import SidebarAd from '../../components/SidebarAd';
|
||||
|
||||
function DocItemMetadata(props) {
|
||||
const {content: DocContent} = props;
|
||||
const {metadata, frontMatter, assets} = DocContent;
|
||||
const {keywords} = frontMatter;
|
||||
const {description, title} = metadata;
|
||||
const image = assets.image ?? frontMatter.image;
|
||||
return (
|
||||
<PageMetadata
|
||||
{...{
|
||||
title,
|
||||
description,
|
||||
keywords,
|
||||
image,
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function DocItemContent(props) {
|
||||
const {content: DocContent} = props;
|
||||
const {metadata, frontMatter} = DocContent;
|
||||
const {
|
||||
hide_title: hideTitle,
|
||||
hide_table_of_contents: hideTableOfContents,
|
||||
toc_min_heading_level: tocMinHeadingLevel,
|
||||
toc_max_heading_level: tocMaxHeadingLevel,
|
||||
} = frontMatter;
|
||||
const {title} = metadata; // We only add a title if:
|
||||
// - user asks to hide it with front matter
|
||||
// - the markdown content does not already contain a top-level h1 heading
|
||||
|
||||
const shouldAddTitle =
|
||||
!hideTitle && typeof DocContent.contentTitle === 'undefined';
|
||||
const windowSize = useWindowSize();
|
||||
const canRenderTOC =
|
||||
!hideTableOfContents && DocContent.toc && DocContent.toc.length > 0;
|
||||
const renderTocDesktop =
|
||||
canRenderTOC && (windowSize === 'desktop' || windowSize === 'ssr');
|
||||
return (
|
||||
<div className="row">
|
||||
<div className={clsx('col', !hideTableOfContents && styles.docItemCol)}>
|
||||
<DocVersionBanner />
|
||||
<div className={styles.docItemContainer}>
|
||||
<article>
|
||||
<DocBreadcrumbs />
|
||||
<DocVersionBadge />
|
||||
|
||||
{canRenderTOC && (
|
||||
<TOCCollapsible
|
||||
toc={DocContent.toc}
|
||||
minHeadingLevel={tocMinHeadingLevel}
|
||||
maxHeadingLevel={tocMaxHeadingLevel}
|
||||
className={clsx(
|
||||
ThemeClassNames.docs.docTocMobile,
|
||||
styles.tocMobile,
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
|
||||
<div className={clsx(ThemeClassNames.docs.docMarkdown, 'markdown')}>
|
||||
{/*
|
||||
Title can be declared inside md content or declared through
|
||||
front matter and added manually. To make both cases consistent,
|
||||
the added title is added under the same div.markdown block
|
||||
See https://github.com/facebook/docusaurus/pull/4882#issuecomment-853021120
|
||||
*/}
|
||||
{shouldAddTitle && (
|
||||
<header>
|
||||
<Heading as="h1">{title}</Heading>
|
||||
</header>
|
||||
)}
|
||||
<div className="margin-bottom--lg">
|
||||
<iframe
|
||||
src="https://ghbtns.com/github-btn.html?user=yangshun&repo=tech-interview-handbook&type=star&count=true&size=large"
|
||||
frameBorder={0}
|
||||
width={160}
|
||||
height={30}
|
||||
title="GitHub Stars"
|
||||
/>
|
||||
<DocItemFooter {...props} />
|
||||
</div>
|
||||
<MDXContent>
|
||||
<DocContent />
|
||||
</MDXContent>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<DocPaginator previous={metadata.previous} next={metadata.next} />
|
||||
<div className="margin-top--md">
|
||||
<SidebarAd position="docs_bottom" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{renderTocDesktop && (
|
||||
<div className="col col--3">
|
||||
<TOC
|
||||
toc={DocContent.toc}
|
||||
minHeadingLevel={tocMinHeadingLevel}
|
||||
maxHeadingLevel={tocMaxHeadingLevel}
|
||||
className={ThemeClassNames.docs.docTocDesktop}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function DocItem(props) {
|
||||
const docHtmlClassName = `docs-doc-id-${props.content.metadata.unversionedId}`;
|
||||
return (
|
||||
<HtmlClassNameProvider className={docHtmlClassName}>
|
||||
<DocItemMetadata {...props} />
|
||||
<DocItemContent {...props} />
|
||||
</HtmlClassNameProvider>
|
||||
);
|
||||
}
|
||||
@ -1,27 +0,0 @@
|
||||
/**
|
||||
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.docItemContainer {
|
||||
padding: 0 3rem;
|
||||
}
|
||||
}
|
||||
.docItemContainer header + *,
|
||||
.docItemContainer article > *:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
@media (min-width: 997px) {
|
||||
.docItemCol {
|
||||
max-width: 75% !important;
|
||||
}
|
||||
|
||||
/* Prevent hydration FOUC, as the mobile TOC needs to be server-rendered */
|
||||
.tocMobile {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@ -1,39 +0,0 @@
|
||||
// Swizzled to remove the prev button.
|
||||
import React from 'react';
|
||||
import Translate, {translate} from '@docusaurus/Translate';
|
||||
import PaginatorNavLink from '@theme/PaginatorNavLink';
|
||||
|
||||
function DocPaginator(props) {
|
||||
const {
|
||||
// previous,
|
||||
next,
|
||||
} = props;
|
||||
|
||||
return (
|
||||
<nav
|
||||
className="pagination-nav docusaurus-mt-lg"
|
||||
aria-label={translate({
|
||||
id: 'theme.docs.paginator.navAriaLabel',
|
||||
message: 'Docs pages navigation',
|
||||
description: 'The ARIA label for the docs pagination',
|
||||
})}>
|
||||
<div className="pagination-nav__item">
|
||||
{next && (
|
||||
<PaginatorNavLink
|
||||
hasArrow={true}
|
||||
{...next}
|
||||
subLabel={
|
||||
<Translate
|
||||
id="theme.docs.paginator.next"
|
||||
description="The label used to navigate to the next doc">
|
||||
Next page
|
||||
</Translate>
|
||||
}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
|
||||
export default DocPaginator;
|
||||
@ -0,0 +1,5 @@
|
||||
import React from 'react';
|
||||
import type { Props } from '@theme/DocSidebar/Mobile';
|
||||
declare function DocSidebarMobile(props: Props): JSX.Element;
|
||||
declare const _default: React.MemoExoticComponent<typeof DocSidebarMobile>;
|
||||
export default _default;
|
||||
@ -1,265 +0,0 @@
|
||||
/**
|
||||
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
import React, {useEffect, useMemo} from 'react';
|
||||
import clsx from 'clsx';
|
||||
import {
|
||||
isActiveSidebarItem,
|
||||
usePrevious,
|
||||
Collapsible,
|
||||
useCollapsible,
|
||||
findFirstCategoryLink,
|
||||
ThemeClassNames,
|
||||
useThemeConfig,
|
||||
useDocSidebarItemsExpandedState,
|
||||
isSamePath,
|
||||
} from '@docusaurus/theme-common';
|
||||
import Link from '@docusaurus/Link';
|
||||
import isInternalUrl from '@docusaurus/isInternalUrl';
|
||||
import {translate} from '@docusaurus/Translate';
|
||||
import IconExternalLink from '@theme/IconExternalLink';
|
||||
import DocSidebarItems from '@theme/DocSidebarItems';
|
||||
import styles from './styles.module.css';
|
||||
import useIsBrowser from '@docusaurus/useIsBrowser';
|
||||
export default function DocSidebarItem({item, ...props}) {
|
||||
switch (item.type) {
|
||||
case 'category':
|
||||
return <DocSidebarItemCategory item={item} {...props} />;
|
||||
|
||||
case 'html':
|
||||
return <DocSidebarItemHtml item={item} {...props} />;
|
||||
|
||||
case 'link':
|
||||
default:
|
||||
return <DocSidebarItemLink item={item} {...props} />;
|
||||
}
|
||||
} // If we navigate to a category and it becomes active, it should automatically
|
||||
// expand itself
|
||||
|
||||
function useAutoExpandActiveCategory({isActive, collapsed, setCollapsed}) {
|
||||
const wasActive = usePrevious(isActive);
|
||||
useEffect(() => {
|
||||
const justBecameActive = isActive && !wasActive;
|
||||
|
||||
if (justBecameActive && collapsed) {
|
||||
setCollapsed(false);
|
||||
}
|
||||
}, [isActive, wasActive, collapsed, setCollapsed]);
|
||||
}
|
||||
/**
|
||||
* When a collapsible category has no link, we still link it to its first child
|
||||
* during SSR as a temporary fallback. This allows to be able to navigate inside
|
||||
* the category even when JS fails to load, is delayed or simply disabled
|
||||
* React hydration becomes an optional progressive enhancement
|
||||
* see https://github.com/facebookincubator/infima/issues/36#issuecomment-772543188
|
||||
* see https://github.com/facebook/docusaurus/issues/3030
|
||||
*/
|
||||
|
||||
function useCategoryHrefWithSSRFallback(item) {
|
||||
const isBrowser = useIsBrowser();
|
||||
return useMemo(() => {
|
||||
if (item.href) {
|
||||
return item.href;
|
||||
} // In these cases, it's not necessary to render a fallback
|
||||
// We skip the "findFirstCategoryLink" computation
|
||||
|
||||
if (isBrowser || !item.collapsible) {
|
||||
return undefined;
|
||||
}
|
||||
|
||||
return findFirstCategoryLink(item);
|
||||
}, [item, isBrowser]);
|
||||
}
|
||||
|
||||
function DocSidebarItemCategory({
|
||||
item,
|
||||
onItemClick,
|
||||
activePath,
|
||||
level,
|
||||
index,
|
||||
...props
|
||||
}) {
|
||||
const {items, label, collapsible, className, href} = item;
|
||||
const hrefWithSSRFallback = useCategoryHrefWithSSRFallback(item);
|
||||
const isActive = isActiveSidebarItem(item, activePath);
|
||||
const isCurrentPage = isSamePath(href, activePath);
|
||||
const {collapsed, setCollapsed} = useCollapsible({
|
||||
// active categories are always initialized as expanded
|
||||
// the default (item.collapsed) is only used for non-active categories
|
||||
initialState: () => {
|
||||
if (!collapsible) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return isActive ? false : item.collapsed;
|
||||
},
|
||||
});
|
||||
useAutoExpandActiveCategory({
|
||||
isActive,
|
||||
collapsed,
|
||||
setCollapsed,
|
||||
});
|
||||
const {expandedItem, setExpandedItem} = useDocSidebarItemsExpandedState();
|
||||
|
||||
function updateCollapsed(toCollapsed = !collapsed) {
|
||||
setExpandedItem(toCollapsed ? null : index);
|
||||
setCollapsed(toCollapsed);
|
||||
}
|
||||
|
||||
const {autoCollapseSidebarCategories} = useThemeConfig();
|
||||
useEffect(() => {
|
||||
if (
|
||||
collapsible &&
|
||||
expandedItem &&
|
||||
expandedItem !== index &&
|
||||
autoCollapseSidebarCategories
|
||||
) {
|
||||
setCollapsed(true);
|
||||
}
|
||||
}, [
|
||||
collapsible,
|
||||
expandedItem,
|
||||
index,
|
||||
setCollapsed,
|
||||
autoCollapseSidebarCategories,
|
||||
]);
|
||||
return (
|
||||
<li
|
||||
className={clsx(
|
||||
ThemeClassNames.docs.docSidebarItemCategory,
|
||||
ThemeClassNames.docs.docSidebarItemCategoryLevel(level),
|
||||
'menu__list-item',
|
||||
{
|
||||
'menu__list-item--collapsed': collapsed,
|
||||
},
|
||||
className,
|
||||
)}>
|
||||
<div
|
||||
className={clsx('menu__list-item-collapsible', {
|
||||
'menu__list-item-collapsible--active': isCurrentPage,
|
||||
})}>
|
||||
<Link
|
||||
className={clsx('menu__link', {
|
||||
'menu__link--sublist': collapsible,
|
||||
'menu__link--sublist-caret': !href && collapsible,
|
||||
'menu__link--active': isActive,
|
||||
})}
|
||||
onClick={
|
||||
collapsible
|
||||
? (e) => {
|
||||
onItemClick?.(item);
|
||||
|
||||
if (href) {
|
||||
updateCollapsed(false);
|
||||
} else {
|
||||
e.preventDefault();
|
||||
updateCollapsed();
|
||||
}
|
||||
}
|
||||
: () => {
|
||||
onItemClick?.(item);
|
||||
}
|
||||
}
|
||||
aria-current={isCurrentPage ? 'page' : undefined}
|
||||
aria-expanded={collapsible ? !collapsed : undefined}
|
||||
href={collapsible ? hrefWithSSRFallback ?? '#' : hrefWithSSRFallback}
|
||||
{...props}>
|
||||
{label}
|
||||
</Link>
|
||||
{href && collapsible && (
|
||||
<button
|
||||
aria-label={translate(
|
||||
{
|
||||
id: 'theme.DocSidebarItem.toggleCollapsedCategoryAriaLabel',
|
||||
message: "Toggle the collapsible sidebar category '{label}'",
|
||||
description:
|
||||
'The ARIA label to toggle the collapsible sidebar category',
|
||||
},
|
||||
{
|
||||
label,
|
||||
},
|
||||
)}
|
||||
type="button"
|
||||
className="clean-btn menu__caret"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
updateCollapsed();
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<Collapsible lazy as="ul" className="menu__list" collapsed={collapsed}>
|
||||
<DocSidebarItems
|
||||
items={items}
|
||||
tabIndex={collapsed ? -1 : 0}
|
||||
onItemClick={onItemClick}
|
||||
activePath={activePath}
|
||||
level={level + 1}
|
||||
/>
|
||||
</Collapsible>
|
||||
</li>
|
||||
);
|
||||
}
|
||||
|
||||
function DocSidebarItemHtml({item, level, index}) {
|
||||
const {value, defaultStyle, className} = item;
|
||||
return (
|
||||
<li
|
||||
className={clsx(
|
||||
ThemeClassNames.docs.docSidebarItemLink,
|
||||
ThemeClassNames.docs.docSidebarItemLinkLevel(level),
|
||||
defaultStyle && `${styles.menuHtmlItem} menu__list-item`,
|
||||
className,
|
||||
)}
|
||||
key={index} // eslint-disable-next-line react/no-danger
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: value,
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function DocSidebarItemLink({
|
||||
item,
|
||||
onItemClick,
|
||||
activePath,
|
||||
level,
|
||||
index,
|
||||
...props
|
||||
}) {
|
||||
const {href, label, className} = item;
|
||||
const isActive = isActiveSidebarItem(item, activePath);
|
||||
const isInternalLink = isInternalUrl(href);
|
||||
return (
|
||||
<li
|
||||
className={clsx(
|
||||
ThemeClassNames.docs.docSidebarItemLink,
|
||||
ThemeClassNames.docs.docSidebarItemLinkLevel(level),
|
||||
'menu__list-item',
|
||||
className,
|
||||
)}
|
||||
key={label}>
|
||||
<Link
|
||||
className={clsx(
|
||||
'menu__link',
|
||||
!isInternalLink && styles.menuExternalLink,
|
||||
{
|
||||
'menu__link--active': isActive,
|
||||
},
|
||||
)}
|
||||
aria-current={isActive ? 'page' : undefined}
|
||||
to={href}
|
||||
{...(isInternalLink && {
|
||||
onClick: onItemClick ? () => onItemClick(item) : undefined,
|
||||
})}
|
||||
{...props}>
|
||||
{label}
|
||||
{!isInternalLink && <IconExternalLink />}
|
||||
</Link>
|
||||
</li>
|
||||
);
|
||||
}
|
||||
@ -1,17 +0,0 @@
|
||||
/**
|
||||
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
|
||||
@media (min-width: 997px) {
|
||||
.menuHtmlItem {
|
||||
padding: var(--ifm-menu-link-padding-vertical)
|
||||
var(--ifm-menu-link-padding-horizontal);
|
||||
}
|
||||
}
|
||||
|
||||
.menuExternalLink {
|
||||
align-items: center;
|
||||
}
|
||||
@ -1,17 +0,0 @@
|
||||
// Swizzled to change the appearance of a paginator nav link.
|
||||
import React from 'react';
|
||||
import clsx from 'clsx';
|
||||
import Link from '@docusaurus/Link';
|
||||
import styles from './styles.module.css';
|
||||
|
||||
function PaginatorNavLink({hasArrow, permalink, title, subLabel, ...rest}) {
|
||||
return (
|
||||
<Link className={clsx('pagination-nav__link', styles.root)} to={permalink}>
|
||||
{subLabel && <div className="pagination-nav__sublabel">{subLabel}</div>}
|
||||
<div className="pagination-nav__label">{title}</div>
|
||||
{hasArrow && <span className={styles.arrow}>→</span>}
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
|
||||
export default PaginatorNavLink;
|
||||
@ -1,13 +0,0 @@
|
||||
.root {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.arrow {
|
||||
font-weight: bold;
|
||||
font-size: 2rem;
|
||||
float: right;
|
||||
transform: scale(2);
|
||||
position: absolute;
|
||||
right: 1.5rem;
|
||||
top: 1rem;
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in new issue