chore: migrate pagination component

components/Learn/PreviousNextLink/__tests__/index.test.tsx

@@ -0,0 +1,44 @@
+import { render, screen } from '@testing-library/react';
+import { IntlProvider } from 'react-intl';
+import PrevNextLink from '..';
+import messages from '../../../../i18n/locales/en.json';
+
+describe('PrevNextLink component', () => {
+  test('renders nothing if neither previous nor next are provided', () => {
+    render(<PrevNextLink />);
+    const component = screen.queryByRole('list');
+    expect(component).not.toBeInTheDocument;
+  });
+
+  test('renders previous link if previous is provided', () => {
+    const previous = { slug: '/previous-page' };
+    render(
+      <IntlProvider locale="en" messages={messages}>
+        <PrevNextLink previous={previous} />
+      </IntlProvider>
+    );
+    expect(screen.getByText(/PREV/)).toHaveAttribute('href', previous.slug);
+  });
+
+  test('renders next link if next is provided', () => {
+    const next = { slug: '/next-page' };
+    render(
+      <IntlProvider locale="en" messages={messages}>
+        <PrevNextLink next={next} />
+      </IntlProvider>
+    );
+    expect(screen.getByText(/NEXT/)).toHaveAttribute('href', next.slug);
+  });
+
+  test('renders both previous and next links if both are provided', () => {
+    const previous = { slug: '/previous-page' };
+    const next = { slug: '/next-page' };
+    render(
+      <IntlProvider locale="en" messages={messages}>
+        <PrevNextLink previous={previous} next={next} />
+      </IntlProvider>
+    );
+    expect(screen.getByText(/PREV/)).toHaveAttribute('href', previous.slug);
+    expect(screen.getByText(/NEXT/)).toHaveAttribute('href', next.slug);
+  });
+});

components/Learn/PreviousNextLink/index.module.scss

@@ -0,0 +1,24 @@
+.prevNextLink {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  list-style: none;
+  margin: 0;
+  padding: 5rem 0 0 0;
+
+  a {
+    align-items: center;
+    color: var(--black7) !important;
+    display: flex;
+    font-family: var(--sans-serif);
+    font-size: 1.4rem;
+    font-weight: var(--font-weight-regular);
+    text-decoration: none !important;
+    text-transform: uppercase;
+    vertical-align: middle;
+
+    &:hover {
+      color: var(--brand-light) !important;
+    }
+  }
+}

components/Learn/PreviousNextLink/index.stories.tsx

@@ -0,0 +1,26 @@
+import PrevNextLink from '.';
+import type { Meta as MetaObj, StoryObj } from '@storybook/react';
+
+type Story = StoryObj<typeof PrevNextLink>;
+type Meta = MetaObj<typeof PrevNextLink>;
+
+export const Default: Story = {
+  args: {
+    previous: { slug: '/previous' },
+    next: { slug: '/next' },
+  },
+};
+
+export const WithoutNext: Story = {
+  args: {
+    previous: { slug: '/previous' },
+  },
+};
+
+export const WithoutPrevious: Story = {
+  args: {
+    next: { slug: '/next' },
+  },
+};
+
+export default { component: PrevNextLink } as Meta;

components/Learn/PreviousNextLink/index.tsx

@@ -0,0 +1,40 @@
+import Link from 'next/link';
+import { FaAngleDoubleLeft, FaAngleDoubleRight } from 'react-icons/fa';
+import { FormattedMessage } from 'react-intl';
+import styles from './index.module.scss';
+import type { FC } from 'react';
+import type { LinkInfo } from '../../../types';
+
+type PreviousNextLinkProps = {
+  previous?: LinkInfo;
+  next?: LinkInfo;
+};
+
+const PrevNextLink: FC<PreviousNextLinkProps> = ({ previous, next }) => {
+  if (!previous && !next) {
+    return null;
+  }
+
+  return (
+    <ul className={styles.prevNextLink}>
+      <li>
+        {previous && (
+          <Link href={previous.slug} rel="prev">
+            <FaAngleDoubleLeft size="1em" style={{ marginRight: '5px' }} />
+            <FormattedMessage id="components.prevnextlink.previous" />
+          </Link>
+        )}
+      </li>
+      <li>
+        {next && (
+          <Link href={next.slug} rel="next">
+            <FormattedMessage id="components.prevnextlink.next" />
+            <FaAngleDoubleRight style={{ marginLeft: '5px' }} />
+          </Link>
+        )}
+      </li>
+    </ul>
+  );
+};
+
+export default PrevNextLink;

i18n/locales/en.json

@@ -49,5 +49,7 @@
   "components.footer.links.security": "Security",
   "components.footer.links.about": "About",
   "components.footer.links.blog": "Blog",
-  "components.footer.links.github": "GitHub"
+  "components.footer.links.github": "GitHub",
+  "components.prevnextlink.next": "NEXT",
+  "components.prevnextlink.previous": "PREV"
 }

types/index.ts

@@ -14,6 +14,7 @@ export * from './i18n';
 export * from './layouts';
 export * from './navigation';
 export * from './nodeVersions';
+export * from './prevNextLink';
 
 export interface AppProps {
   i18nData: Pick<LocaleContext, 'localeMessages' | 'currentLocale'>;

types/prevNextLink.ts

@@ -0,0 +1,3 @@
+export interface LinkInfo {
+  slug: string;
+}