feat: create responsive css-only table

Author: araujogui

apps/site/components/Releases/PreviousReleasesTable.tsx

@@ -3,7 +3,7 @@
 import Badge from '@node-core/ui-components/Common/Badge';
 import { useTranslations } from 'next-intl';
 import type { FC } from 'react';
-import { useState } from 'react';
+import { Fragment, useState } from 'react';
 
 import FormattedTime from '#site/components/Common/FormattedTime';
 import LinkWithArrow from '#site/components/Common/LinkWithArrow';
@@ -41,21 +41,29 @@ const PreviousReleasesTable: FC = () => {
 
       <tbody>
         {releaseData.map(release => (
-          <>
-            <tr key={release.major}>
-              <td data-label="Version">v{release.major}</td>
+          <Fragment key={release.major}>
+            <tr data-label={release.major}>
+              <td data-label={t('components.downloadReleasesTable.version')}>
+                v{release.major}
+              </td>
 
-              <td data-label="LTS">{release.codename || '-'}</td>
+              <td data-label={t('components.downloadReleasesTable.codename')}>
+                {release.codename || '-'}
+              </td>
 
-              <td data-label="Date">
+              <td
+                data-label={t('components.downloadReleasesTable.firstReleased')}
+              >
                 <FormattedTime date={release.currentStart} />
               </td>
 
-              <td data-label="Date">
+              <td
+                data-label={t('components.downloadReleasesTable.lastUpdated')}
+              >
                 <FormattedTime date={release.releaseDate} />
               </td>
 
-              <td data-label="Status">
+              <td data-label={t('components.downloadReleasesTable.status')}>
                 <Badge kind={BADGE_KIND_MAP[release.status]} size="small">
                   {release.status}
                   {release.status === 'End-of-life' ? ' (EoL)' : ''}
@@ -77,7 +85,7 @@ const PreviousReleasesTable: FC = () => {
               open={currentModal === release.version}
               onOpenChange={open => open || setCurrentModal(undefined)}
             />
-          </>
+          </Fragment>
         ))}
       </tbody>
     </table>

packages/ui-components/src/styles/markdown.css

@@ -128,23 +128,51 @@ main {
       w-full
       border-separate
       border-spacing-0
-      border
       border-neutral-200
       text-left
       text-sm
+      max-sm:block
+      md:border
       dark:border-neutral-800;
 
+    thead {
+      @apply max-sm:sr-only;
+    }
+
+    tbody {
+      @apply max-sm:block
+        max-sm:space-y-4;
+    }
+
+    tr {
+      @apply max-sm:rounded-xs
+        max-sm:block
+        max-sm:border
+        max-sm:border-neutral-200
+        max-sm:p-4
+        max-sm:before:content-[attr(data-label)]
+        max-sm:dark:border-neutral-800;
+    }
+
+    td {
+      @apply border-b
+        max-sm:flex
+        max-sm:gap-2
+        max-sm:py-2
+        max-sm:before:grow
+        max-sm:before:content-[attr(data-label)]
+        max-sm:last:border-0;
+    }
+
     th,
     td {
-      @apply max-xs:block
-        max-xs:border-l-0
-        border
-        border-r-0
-        border-t-0
-        border-neutral-200
-        px-4
-        py-2
+      @apply border-neutral-200
         text-neutral-900
+        md:border
+        md:border-r-0
+        md:border-t-0
+        md:px-4
+        md:py-2
         dark:border-neutral-800
         dark:text-white;