Migrate JsonLink component

components/Api/JsonLink/index.module.scss

@@ -0,0 +1,24 @@
+.json {
+  display: flex;
+  flex-wrap: wrap;
+
+  a {
+    color: var(--color-text-secondary);
+    font-family: var(--sans-serif);
+    font-size: 1.4rem;
+    font-weight: var(--font-weight-regular);
+    margin-left: 0;
+    text-decoration: none !important;
+    text-transform: uppercase;
+    vertical-align: middle;
+
+    span {
+      font-weight: var(--font-weight-regular);
+      vertical-align: middle;
+    }
+
+    &:hover {
+      color: var(--brand-light);
+    }
+  }
+}

components/Api/JsonLink/index.stories.ts

@@ -0,0 +1,14 @@
+import JsonLink from './index';
+import type { Meta as MetaObj, StoryObj } from '@storybook/react';
+
+type Story = StoryObj<typeof JsonLink>;
+type Meta = MetaObj<typeof JsonLink>;
+
+export const Default: Story = {
+  args: {
+    version: 'v18',
+    fileName: 'documentation',
+  },
+};
+
+export default { component: JsonLink } as Meta;

components/Api/JsonLink/index.tsx

@@ -0,0 +1,20 @@
+import { FormattedMessage } from 'react-intl';
+import styles from './index.module.scss';
+import type { FC } from 'react';
+
+type JsonLinkProps = {
+  fileName: string;
+  version: string;
+};
+
+const JsonLink: FC<JsonLinkProps> = ({ fileName, version }) => (
+  <div className={styles.json}>
+    <a
+      href={`https://nodejs.org/docs/latest-${version}.x/api/${fileName}.json`}
+    >
+      <FormattedMessage id="components.api.jsonLink.title" tagName="span" />
+    </a>
+  </div>
+);
+
+export default JsonLink;

i18n/locales/en.json

@@ -58,5 +58,6 @@
   "components.home.nodeFeatures.openSource.description": "Node.js is open source and actively maintained by contributors all over the world",
   "components.home.nodeFeatures.everywhere.title": "Everywhere",
   "components.home.nodeFeatures.everywhere.description": "Node.js has been adapted to work in a wide variety of places",
-  "components.common.shellBox.copy": "{copied, select, true {copied}other {copy}}"
+  "components.common.shellBox.copy": "{copied, select, true {copied}other {copy}}",
+  "components.api.jsonLink.title": "View as JSON"
 }