From ac48407134138edd3cf2577c5cd0400c735c6e61 Mon Sep 17 00:00:00 2001
From: Bartosz Kaszubowski <gosimek@gmail.com>
Date: Fri, 21 Nov 2025 18:19:28 +0100
Subject: [PATCH] website: add release information to the versions page

---
 website/src/css/customTheme.scss |  16 ++---
 website/src/css/versions.scss    |  52 +++++++++++---
 website/src/pages/versions.tsx   | 118 +++++++++++++++++++------------
 3 files changed, 123 insertions(+), 63 deletions(-)

diff --git a/website/src/css/customTheme.scss b/website/src/css/customTheme.scss
index 66ef5b9d2f7..922d7581983 100644
--- a/website/src/css/customTheme.scss
+++ b/website/src/css/customTheme.scss
@@ -325,6 +325,14 @@ hr {
   background-color: var(--ifm-table-border-color);
 }
 
+.table-wrapper {
+  border: 1px solid var(--ifm-table-border-color);
+  border-radius: var(--ifm-global-radius);
+  overflow: hidden;
+  box-shadow: var(--ifm-table-box-shadow);
+  margin-bottom: var(--ifm-spacing-vertical);
+}
+
 .markdown {
   h2:first-child {
     margin-top: 0;
@@ -396,14 +404,6 @@ hr {
     font-weight: 600;
   }
 
-  .table-wrapper {
-    border: 1px solid var(--ifm-table-border-color);
-    border-radius: var(--ifm-global-radius);
-    overflow: hidden;
-    box-shadow: var(--ifm-table-box-shadow);
-    margin-bottom: var(--ifm-spacing-vertical);
-  }
-
   table {
     display: table;
     width: 100%;
diff --git a/website/src/css/versions.scss b/website/src/css/versions.scss
index 40efe788c90..9971f9897c7 100644
--- a/website/src/css/versions.scss
+++ b/website/src/css/versions.scss
@@ -12,7 +12,8 @@
   padding: 28px;
 
   h1 {
-    font-size: 3rem;
+    font-size: 2.5rem;
+    line-height: 3rem;
   }
 
   h2 {
@@ -35,15 +36,50 @@
     }
   }
 
-  table th,
-  table td {
-    min-width: 100px;
-    font-size: 15px;
-    padding: 8px 20px;
+  .versions {
+    margin-bottom: 0;
+
+    tr:first-child {
+      border-top: 0;
+    }
   }
 
-  .versions {
-    margin-bottom: 32px;
+  .table-wrapper {
+    margin-bottom: 24px;
+    width: fit-content;
+
+    tr th {
+      padding: 8px 16px;
+      min-width: 100px;
+      font-size: 80%;
+      border: 0;
+      border-right: 1px solid var(--ifm-table-border-color);
+
+      &:last-child {
+        border-right: 0;
+      }
+    }
+
+    tr td {
+      padding: 8px 16px;
+      min-width: 100px;
+      font-size: 90%;
+      border: 0;
+      border-right: 1px solid var(--ifm-table-border-color);
+      align-content: baseline;
+
+      code {
+        vertical-align: unset;
+      }
+
+      &:last-child {
+        border-right: 0;
+      }
+    }
+  }
+
+  .markdown > *:last-child {
+    margin-bottom: 24px !important;
   }
 }
 
diff --git a/website/src/pages/versions.tsx b/website/src/pages/versions.tsx
index 7eed7e3dc90..611c89197a7 100644
--- a/website/src/pages/versions.tsx
+++ b/website/src/pages/versions.tsx
@@ -5,9 +5,11 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React from 'react';
-import Layout from '@theme/Layout';
 import useBaseUrl from '@docusaurus/useBaseUrl';
+import ReleasesTable from '@site/src/components/releases/ReleasesTable';
+import Admonition from '@theme/Admonition';
+import Layout from '@theme/Layout';
+
 import versions from '../../versions.json';
 // The versionsArchived mapping is a custom feature, NOT a Docusaurus feature
 import versionsArchived from '../../versionsArchived.json';
@@ -87,70 +89,92 @@ const Versions = () => {
         </a>
         . Eventually, the release candidate will be promoted to stable.
       </p>
-      <h2>Next version (Unreleased)</h2>
       <p>
+        Below is the schedule and current status of recent and upcoming React
+        Native releases:
+      </p>
+      <div className="markdown">
+        <div className="table-wrapper">
+          <ReleasesTable />
+        </div>
+        <span />
+      </div>
+      <p>
+        You can read more details about release schedule and the meaning of
+        statuses on the <a href="/releases">Releases Overview</a> page.
+      </p>
+      <h2>Next version (Unreleased)</h2>
+      <div className="table-wrapper">
+        <table className="versions">
+          <tbody>
+            {latestVersions.map(version => (
+              <VersionItem
+                key={'version_' + version}
+                version={version}
+                currentVersion={currentVersion}
+              />
+            ))}
+          </tbody>
+        </table>
+      </div>
+      <Admonition type="note">
         To see what changes are coming and provide better feedback to React
         Native contributors, use the latest release candidate when possible.
         Changes introduced in a release candidate will have been shipped to
         production Facebook apps for over two weeks by the time the release
         candidate is cut.
-      </p>
-      <table className="versions">
-        <tbody>
-          {latestVersions.map(version => (
-            <VersionItem
-              key={'version_' + version}
-              version={version}
-              currentVersion={currentVersion}
-            />
-          ))}
-        </tbody>
-      </table>
+      </Admonition>
       <h2>Latest version</h2>
       <p>
         The most recent stable version will be used automatically whenever a new
         project is created using the <code>npx react-native init</code> command.
       </p>
-      <table className="versions">
-        <tbody>
-          <VersionItem
-            key={'version_' + currentVersion}
-            version={currentVersion}
-            currentVersion={currentVersion}
-          />
-        </tbody>
-      </table>
-      <h2>Previous versions</h2>
-      <table className="versions">
-        <tbody>
-          {stableVersions.map(version => (
+      <div className="table-wrapper">
+        <table className="versions">
+          <tbody>
             <VersionItem
-              key={'version_' + version}
-              version={version}
+              key={'version_' + currentVersion}
+              version={currentVersion}
               currentVersion={currentVersion}
             />
-          ))}
-        </tbody>
-      </table>
-      <h2>Archived versions</h2>
-      <p>
-        The documentation for unmaintained versions can be found on website
-        archive snapshots, hosted as separate sites.
-      </p>
-      <table className="versions">
-        <tbody>
-          {Object.entries(versionsArchived).map(
-            ([version, archivedDocumentationUrl]) => (
+          </tbody>
+        </table>
+      </div>
+      <h2>Previous versions</h2>
+      <div className="table-wrapper">
+        <table className="versions">
+          <tbody>
+            {stableVersions.map(version => (
               <VersionItem
                 key={'version_' + version}
                 version={version}
-                archivedDocumentationUrl={archivedDocumentationUrl}
                 currentVersion={currentVersion}
               />
-            )
-          )}
-        </tbody>
-      </table>
+            ))}
+          </tbody>
+        </table>
+      </div>
+      <h3>Archived versions</h3>
+      <p>
+        The documentation for unmaintained versions can be found on website
+        archive snapshots, hosted as separate sites.
+      </p>
+      <div className="table-wrapper">
+        <table className="versions">
+          <tbody>
+            {Object.entries(versionsArchived).map(
+              ([version, archivedDocumentationUrl]) => (
+                <VersionItem
+                  key={'version_' + version}
+                  version={version}
+                  archivedDocumentationUrl={archivedDocumentationUrl}
+                  currentVersion={currentVersion}
+                />
+              )
+            )}
+          </tbody>
+        </table>
+      </div>
       <p>
         The documentation for versions below <code>0.60</code> can be found on
         the separate website called{' '}