feat: redesign the previous releases page

apps/site/components/Downloads/DownloadReleasesTable/DetailsButton.tsx

@@ -0,0 +1,30 @@
+'use client';
+
+import { useTranslations } from 'next-intl';
+import type { FC } from 'react';
+import { use } from 'react';
+
+import LinkWithArrow from '@/components/LinkWithArrow';
+import { ReleaseModalContext } from '@/providers/releaseModalProvider';
+import type { NodeRelease } from '@/types';
+
+type DetailsButtonProps = {
+  versionData: NodeRelease;
+};
+
+const DetailsButton: FC<DetailsButtonProps> = ({ versionData }) => {
+  const t = useTranslations('components.downloadReleasesTable');
+
+  const { openModal } = use(ReleaseModalContext);
+
+  return (
+    <LinkWithArrow
+      className="cursor-pointer"
+      onClick={() => openModal(versionData)}
+    >
+      {t('details')}
+    </LinkWithArrow>
+  );
+};
+
+export default DetailsButton;

apps/site/components/Downloads/DownloadReleasesTable/index.tsx

@@ -0,0 +1,58 @@
+import Badge from '@node-core/ui-components/Common/Badge';
+import { getTranslations } from 'next-intl/server';
+import type { FC } from 'react';
+
+import FormattedTime from '@/components/Common/FormattedTime';
+import DetailsButton from '@/components/Downloads/DownloadReleasesTable/DetailsButton';
+import getReleaseData from '@/next-data/releaseData';
+
+// This is a React Async Server Component
+// Note that Hooks cannot be used in a RSC async component
+// Async Components do not get re-rendered at all.
+const DownloadReleasesTable: FC = async () => {
+  const releaseData = await getReleaseData();
+
+  const t = await getTranslations();
+
+  return (
+    <table id="tbVersions" className="download-table full-width">
+      <thead>
+        <tr>
+          <th>{t('components.downloadReleasesTable.version')}</th>
+          <th>{t('components.downloadReleasesTable.codename')}</th>
+          <th>{t('components.downloadReleasesTable.firstReleased')}</th>
+          <th>{t('components.downloadReleasesTable.lastUpdated')}</th>
+          <th>{t('components.downloadReleasesTable.status')}</th>
+          <th></th>
+        </tr>
+      </thead>
+      <tbody>
+        {releaseData.map(release => (
+          <tr key={release.major}>
+            <td data-label="Version">v{release.major}</td>
+            <td data-label="LTS">{release.codename || '-'}</td>
+            <td data-label="Date">
+              <FormattedTime date={release.currentStart} />
+            </td>
+            <td data-label="Date">
+              <FormattedTime date={release.releaseDate} />
+            </td>
+            <td data-label="Status">
+              <Badge
+                kind={release.status === 'End-of-life' ? 'warning' : 'default'}
+                size="small"
+              >
+                {release.status}
+              </Badge>
+            </td>
+            <td className="download-table-last">
+              <DetailsButton versionData={release} />
+            </td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+};
+
+export default DownloadReleasesTable;

apps/site/components/Downloads/MinorReleasesTable/index.module.css

@@ -0,0 +1,8 @@
+@reference "../../../styles/index.css";
+
+.links {
+  @apply flex
+    h-4
+    items-center
+    gap-2;
+}

apps/site/components/Downloads/MinorReleasesTable/index.tsx

@@ -0,0 +1,64 @@
+'use client';
+
+import Separator from '@node-core/ui-components/Common/Separator';
+import { useTranslations } from 'next-intl';
+import type { FC } from 'react';
+
+import Link from '@/components/Link';
+import { BASE_CHANGELOG_URL } from '@/next.constants.mjs';
+import type { MinorVersion } from '@/types';
+import { getNodeApiLink } from '@/util/getNodeApiLink';
+
+import styles from './index.module.css';
+
+type MinorReleasesTableProps = {
+  releases: Array<MinorVersion>;
+};
+
+export const MinorReleasesTable: FC<MinorReleasesTableProps> = ({
+  releases,
+}) => {
+  const t = useTranslations('components.minorReleasesTable');
+
+  return (
+    <table>
+      <thead>
+        <tr>
+          <th>{t('version')}</th>
+          <th>{t('links')}</th>
+        </tr>
+      </thead>
+      <tbody>
+        {releases.map(release => (
+          <tr key={release.version}>
+            <td>v{release.version}</td>
+            <td>
+              <div className={styles.links}>
+                <Link
+                  kind="neutral"
+                  href={`https://nodejs.org/download/release/v${release.version}/`}
+                >
+                  {t('actions.release')}
+                </Link>
+                <Separator orientation="vertical" />
+                <Link
+                  kind="neutral"
+                  href={`${BASE_CHANGELOG_URL}${release.version}`}
+                >
+                  {t('actions.changelog')}
+                </Link>
+                <Separator orientation="vertical" />
+                <Link
+                  kind="neutral"
+                  href={getNodeApiLink(`v${release.version}`)}
+                >
+                  {t('actions.docs')}
+                </Link>
+              </div>
+            </td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+};

apps/site/components/Downloads/ReleaseModal/index.tsx

@@ -0,0 +1,62 @@
+import AlertBox from '@node-core/ui-components/Common/AlertBox';
+import Modal from '@node-core/ui-components/Common/Modal';
+import { useTranslations } from 'next-intl';
+import type { FC } from 'react';
+
+import { MinorReleasesTable } from '@/components/Downloads/MinorReleasesTable';
+import { ReleaseOverview } from '@/components/Downloads/ReleaseOverview';
+import LinkWithArrow from '@/components/LinkWithArrow';
+import type { NodeRelease } from '@/types';
+
+type ReleaseModalProps = {
+  isOpen: boolean;
+  closeModal: () => void;
+  release: NodeRelease;
+};
+
+const ReleaseModal: FC<ReleaseModalProps> = ({
+  isOpen,
+  closeModal,
+  release,
+}) => {
+  const t = useTranslations();
+
+  const modalHeadingKey = release.codename
+    ? 'components.releaseModal.title'
+    : 'components.releaseModal.titleWithoutCodename';
+
+  const modalHeading = t(modalHeadingKey, {
+    version: release.major,
+    codename: release.codename ?? '',
+  });
+
+  return (
+    <Modal open={isOpen} onOpenChange={closeModal} heading={modalHeading}>
+      {release.status === 'End-of-life' && (
+        <AlertBox
+          title={t('components.common.alertBox.warning')}
+          level="warning"
+          size="small"
+        >
+          {t('components.releaseModal.unsupportedVersionWarning')}
+        </AlertBox>
+      )}
+
+      {release.releaseAnnounceLink && (
+        <LinkWithArrow href={release.releaseAnnounceLink}>
+          {t('components.releaseModal.releaseAnnouncement')}
+        </LinkWithArrow>
+      )}
+
+      <h5>{t('components.releaseModal.overview')}</h5>
+
+      <ReleaseOverview release={release} />
+
+      <h5>{t('components.releaseModal.minorVersions')}</h5>
+
+      <MinorReleasesTable releases={release.minorVersions} />
+    </Modal>
+  );
+};
+
+export default ReleaseModal;

apps/site/components/Downloads/ReleaseOverview/index.module.css

@@ -0,0 +1,38 @@
+@reference "../../../styles/index.css";
+
+.root {
+  @apply rounded
+    border
+    border-neutral-200
+    p-4
+    text-neutral-900
+    dark:border-neutral-800
+    dark:text-white;
+
+  .container {
+    @apply grid
+      grid-cols-2
+      gap-4
+      lg:grid-cols-3;
+  }
+
+  .item {
+    @apply flex
+      items-center
+      gap-2;
+
+    h1 {
+      @apply text-sm
+        font-semibold;
+    }
+
+    h2 {
+      @apply text-xs
+        font-normal;
+    }
+
+    svg {
+      @apply size-4;
+    }
+  }
+}