From 910e729aa2e5a94952fd1903a14d4ef4acef6fb4 Mon Sep 17 00:00:00 2001
From: Shiba Rin <hinatakaho517@gmail.com>
Date: Sun, 10 Sep 2023 17:00:19 +0800
Subject: [PATCH] feat: add CrossLink component

---
 components/Common/CrossLink/index.module.scss | 25 ++++++++++
 components/Common/CrossLink/index.stories.tsx | 47 +++++++++++++++++++
 components/Common/CrossLink/index.tsx         | 40 ++++++++++++++++
 i18n/locales/en.json                          |  2 +
 4 files changed, 114 insertions(+)
 create mode 100644 components/Common/CrossLink/index.module.scss
 create mode 100644 components/Common/CrossLink/index.stories.tsx
 create mode 100644 components/Common/CrossLink/index.tsx

diff --git a/components/Common/CrossLink/index.module.scss b/components/Common/CrossLink/index.module.scss
new file mode 100644
index 0000000000000..fd0265fee0baf
--- /dev/null
+++ b/components/Common/CrossLink/index.module.scss
@@ -0,0 +1,25 @@
+.crossLink {
+  @apply flex flex-col items-start p-3 gap-2 bg-white dark:bg-black
+    border border-solid border-neutral-300 dark:border-neutral-900 rounded;
+
+  .header {
+    @apply flex items-center self-stretch gap-2
+      text-xs text-neutral-800 dark:text-neutral-100;
+
+    &.right {
+      @apply justify-end;
+    }
+
+    .icon {
+      @apply h-4 w-4 text-neutral-600 dark:text-neutral-400;
+    }
+  }
+
+  .content {
+    @apply text-sm truncate text-neutral-900 dark:text-white self-stretch;
+
+    &.right {
+      @apply text-right;
+    }
+  }
+}
diff --git a/components/Common/CrossLink/index.stories.tsx b/components/Common/CrossLink/index.stories.tsx
new file mode 100644
index 0000000000000..d5337efe1f182
--- /dev/null
+++ b/components/Common/CrossLink/index.stories.tsx
@@ -0,0 +1,47 @@
+import type { Meta as MetaObj, StoryObj } from '@storybook/react';
+import CrossLink from './index';
+
+type Story = StoryObj<typeof CrossLink>;
+type Meta = MetaObj<typeof CrossLink>;
+
+export const Prev: Story = {
+  args: {
+    direction: 'left',
+    text: 'How to install Node.js',
+    url: 'https://nodejs.dev/en/learn/how-to-install-nodejs/',
+  },
+};
+
+export const Next: Story = {
+  args: {
+    direction: 'right',
+    text: 'How much JavaScript do you need to know to use Node.js?',
+    url: 'https://nodejs.dev/en/learn/how-much-javascript-do-you-need-to-know-to-use-nodejs/',
+  },
+};
+
+export const PrevDark: Story = {
+  render: () => (
+    <div data-theme="dark" className="w-80 bg-black p-2">
+      <CrossLink
+        direction="left"
+        text="How to install Node.js"
+        url="https://nodejs.dev/en/learn/how-to-install-nodejs/"
+      />
+    </div>
+  ),
+};
+
+export const NextDark: Story = {
+  render: () => (
+    <div data-theme="dark" className="w-80 bg-black p-2">
+      <CrossLink
+        direction="right"
+        text="How much JavaScript do you need to know to use Node.js?"
+        url="https://nodejs.dev/en/learn/how-much-javascript-do-you-need-to-know-to-use-nodejs/"
+      />
+    </div>
+  ),
+};
+
+export default { component: CrossLink } as Meta;
diff --git a/components/Common/CrossLink/index.tsx b/components/Common/CrossLink/index.tsx
new file mode 100644
index 0000000000000..44a9e941dfe1b
--- /dev/null
+++ b/components/Common/CrossLink/index.tsx
@@ -0,0 +1,40 @@
+import styles from './index.module.scss';
+import Link from 'next/link';
+import classNames from 'classnames';
+import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/react/24/solid';
+import { FormattedMessage } from 'react-intl';
+import type { FC } from 'react';
+
+type CrossLinkProps = {
+  direction: 'left' | 'right';
+  text: string;
+  url: string;
+};
+
+const CrossLink: FC<CrossLinkProps> = ({ direction, text, url }) => {
+  const contentClasses = classNames(styles['content'], {
+    [styles['right']]: direction === 'right',
+  });
+
+  return (
+    <Link className={styles.crossLink} href={url}>
+      {direction === 'left' && (
+        <div className={styles.header}>
+          <ChevronLeftIcon className={styles.icon} />
+          <FormattedMessage id="components.common.crossLink.prev" />
+        </div>
+      )}
+
+      {direction === 'right' && (
+        <div className={`${styles.header} ${styles.right}`}>
+          <FormattedMessage id="components.common.crossLink.next" />
+          <ChevronRightIcon className={styles.icon} />
+        </div>
+      )}
+
+      <div className={contentClasses}>{text}</div>
+    </Link>
+  );
+};
+
+export default CrossLink;
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
index 48b0a269bb50f..7fd602562845f 100644
--- a/i18n/locales/en.json
+++ b/i18n/locales/en.json
@@ -34,6 +34,8 @@
   "components.header.buttons.toggleDarkMode": "Toggle dark/light mode",
   "components.pagination.next": "Newer | ",
   "components.pagination.previous": "Older",
+  "components.common.crossLink.prev": "Prev",
+  "components.common.crossLink.next": "Next",
   "layouts.blogPost.author.byLine": "{author, select, null {} other {By {author}, }}",
   "layouts.blogIndex.currentYear": "News from {year}",
   "components.api.jsonLink.title": "View as JSON",