revert: tablebody

Author: efekrskl

apps/site/components/EOL/EOLReleaseTable/TableBody.tsx

@@ -0,0 +1,68 @@
+'use client';
+
+import { useTranslations } from 'next-intl';
+import type { FC } from 'react';
+import { Fragment, useState } from 'react';
+
+import FormattedTime from '#site/components/Common/FormattedTime';
+import LinkWithArrow from '#site/components/Common/LinkWithArrow';
+import EOLModal from '#site/components/EOL/EOLModal';
+import VulnerabilityChips from '#site/components/EOL/VulnerabilityChips';
+import type { NodeRelease } from '#site/types/releases.js';
+import type { GroupedVulnerabilities } from '#site/types/vulnerabilities.js';
+
+type EOLReleaseTableBodyProps = {
+  eolReleases: Array<NodeRelease>;
+  vulnerabilities: GroupedVulnerabilities;
+};
+
+const EOLReleaseTableBody: FC<EOLReleaseTableBodyProps> = ({
+  eolReleases,
+  vulnerabilities,
+}) => {
+  const t = useTranslations();
+
+  const [currentModal, setCurrentModal] = useState<string | undefined>();
+
+  return (
+    <tbody>
+      {eolReleases.map(release => (
+        <Fragment key={release.major}>
+          <tr>
+            <td data-label="Version">
+              v{release.major} {release.codename ? `(${release.codename})` : ''}
+            </td>
+
+            <td data-label="Date">
+              <FormattedTime date={release.releaseDate} />
+            </td>
+
+            <td>
+              <VulnerabilityChips
+                vulnerabilities={vulnerabilities[release.major]}
+              />
+            </td>
+
+            <td>
+              <LinkWithArrow
+                className="cursor-pointer"
+                onClick={() => setCurrentModal(release.version)}
+              >
+                {t('components.downloadReleasesTable.details')}
+              </LinkWithArrow>
+            </td>
+          </tr>
+
+          <EOLModal
+            release={release}
+            vulnerabilities={vulnerabilities[release.major]}
+            open={currentModal === release.version}
+            onOpenChange={open => open || setCurrentModal(undefined)}
+          />
+        </Fragment>
+      ))}
+    </tbody>
+  );
+};
+
+export default EOLReleaseTableBody;

apps/site/components/EOL/EOLReleaseTable/TableClient.tsx

@@ -1,10 +1,11 @@
+import { getTranslations } from 'next-intl/server';
 import type { FC } from 'react';
 
 import provideReleaseData from '#site/next-data/providers/releaseData';
 import provideVulnerabilities from '#site/next-data/providers/vulnerabilities';
 import { EOL_VERSION_IDENTIFIER } from '#site/next.constants.mjs';
 
-import EOLReleaseTableClient from './TableClient';
+import EOLReleaseTableBody from './TableBody';
 
 const EOLReleaseTable: FC = async () => {
   const releaseData = await provideReleaseData();
@@ -14,11 +15,27 @@ const EOLReleaseTable: FC = async () => {
     release => release.status === EOL_VERSION_IDENTIFIER
   );
 
+  const t = await getTranslations();
+
   return (
-    <EOLReleaseTableClient
-      eolReleases={eolReleases}
-      vulnerabilities={vulnerabilities}
-    />
+    <table id="tbVulnerabilities">
+      <thead>
+        <tr>
+          <th>
+            {t('components.eolTable.version')} (
+            {t('components.eolTable.codename')})
+          </th>
+          <th>{t('components.eolTable.lastUpdated')}</th>
+          <th>{t('components.eolTable.vulnerabilities')}</th>
+          <th>{t('components.eolTable.details')}</th>
+        </tr>
+      </thead>
+
+      <EOLReleaseTableBody
+        eolReleases={eolReleases}
+        vulnerabilities={vulnerabilities}
+      />
+    </table>
   );
 };