nodejs.org/apps/site/components/Releases/MinorReleasesTable/index.tsx at 569eb2bf70505be8e5915a41f0de2c3246a2d246 · araujogui/nodejs.org · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
import { CodeBracketSquareIcon } from '@heroicons/react/24/outline';
import Separator from '@node-core/ui-components/Common/Separator';
import NpmIcon from '@node-core/ui-components/Icons/PackageManager/Npm';
import { useTranslations } from 'next-intl';
import type { FC } from 'react';

import LinkWithArrow from '#site/components/Common/LinkWithArrow';
import Link from '#site/components/Link';
import ReleaseOverviewItem from '#site/components/Releases/ReleaseOverview/ReleaseOverviewItem';
import { BASE_CHANGELOG_URL } from '#site/next.constants.mjs';
import type { MinorVersion } from '#site/types';
import { getNodeApiUrl } from '#site/util/url';

import styles from './index.module.css';

type MinorReleasesTableProps = {
  releases: Array<MinorVersion>;
};

const MinorReleasesTable: FC<MinorReleasesTableProps> = ({ releases }) => {
  const t = useTranslations();

  return (
    <table>
      <thead>
        <tr>
          <th>{t('components.minorReleasesTable.version')}</th>
          <th>{t('components.minorReleasesTable.nApiVersion')}</th>
          <th>{t('components.minorReleasesTable.npmVersion')}</th>
          <th>{t('components.minorReleasesTable.v8Version')}</th>
          <th>{t('components.minorReleasesTable.links')}</th>
        </tr>
      </thead>
      <tbody>
        {releases.map(release => (
          <tr key={release.version}>
            <td data-label={t('components.minorReleasesTable.version')}>
              <Link href={`/download/archive/v${release.version}`}>
                v{release.version}
              </Link>
            </td>
            <td data-label={t('components.minorReleasesTable.nApiVersion')}>
              {release.modules && (
                <ReleaseOverviewItem
                  Icon={CodeBracketSquareIcon}
                  title={`v${release.modules}`}
                  className={styles.releaseOverviewItem}
                />
              )}
            </td>
            <td data-label={t('components.minorReleasesTable.npmVersion')}>
              {release.npm && (
                <ReleaseOverviewItem
                  Icon={NpmIcon}
                  title={`v${release.npm}`}
                  className={styles.releaseOverviewItem}
                />
              )}
            </td>
            <td data-label={t('components.minorReleasesTable.v8Version')}>
              <ReleaseOverviewItem
                Icon={CodeBracketSquareIcon}
                title={`v${release.v8}`}
                className={styles.releaseOverviewItem}
              />
            </td>
            <td>
              <div className={styles.additionalLinks}>
                <Link href={getNodeApiUrl(`v${release.version}`)}>
                  {t('components.minorReleasesTable.actions.docs')}
                </Link>
                <Separator orientation="vertical" />
                <LinkWithArrow href={`${BASE_CHANGELOG_URL}${release.version}`}>
                  {t('components.minorReleasesTable.actions.changelog')}
                </LinkWithArrow>
              </div>
            </td>
          </tr>
        ))}
      </tbody>
    </table>
  );
};

export default MinorReleasesTable;