refactor: stateless select used instead of the HTML details element

Author: canerakdas

apps/site/components/withDownloadArchive.tsx

@@ -6,18 +6,12 @@ import {
   buildReleaseArtifacts,
   extractVersionFromPath,
   findReleaseByVersion,
-  getDownloadArchiveNavigation,
 } from '#site/util/download/archive';
 
 type DownloadArchive = ReturnType<typeof buildReleaseArtifacts>;
 
-type Navigation = {
-  label: string;
-  href: string;
-};
-
 type WithDownloadArchiveProps = {
-  children: FC<DownloadArchive & { navigation: Array<Navigation> }>;
+  children: FC<DownloadArchive>;
 };
 
 /**
@@ -44,13 +38,12 @@ const WithDownloadArchive: FC<WithDownloadArchiveProps> = async ({
     return null;
   }
 
-  const navigation = getDownloadArchiveNavigation(releaseData);
   const releaseArtifacts = buildReleaseArtifacts(
     release,
     version === 'archive' ? release.versionWithPrefix : version
   );
 
-  return <Component {...releaseArtifacts} navigation={navigation} />;
+  return <Component {...releaseArtifacts} />;
 };
 
 export default WithDownloadArchive;

apps/site/components/withReleaseSelect.tsx

@@ -0,0 +1,31 @@
+'use client';
+
+import WithNoScriptSelect from '@node-core/ui-components/Common/Select/NoScriptSelect';
+import type { ComponentProps, FC } from 'react';
+
+import Link from '#site/components/Link';
+import { useRouter } from '#site/navigation.mjs';
+import provideReleaseData from '#site/next-data/providers/releaseData';
+import { getDownloadArchiveNavigation } from '#site/util/download/archive';
+
+type WithReleaseSelectProps = Omit<
+  ComponentProps<typeof WithNoScriptSelect>,
+  'values' | 'as' | 'onChange'
+>;
+
+const WithReleaseSelect: FC<WithReleaseSelectProps> = ({ ...props }) => {
+  const releaseData = provideReleaseData();
+  const { push } = useRouter();
+  const navigation = getDownloadArchiveNavigation(releaseData);
+
+  return (
+    <WithNoScriptSelect
+      {...props}
+      values={navigation}
+      as={Link}
+      onChange={push}
+    />
+  );
+};
+
+export default WithReleaseSelect;

apps/site/next.mdx.use.client.mjs

@@ -18,6 +18,7 @@ import ReleaseVersionDropdown from './components/Downloads/Release/VersionDropdo
 import Link from './components/Link';
 import MDXCodeBox from './components/MDX/CodeBox';
 import MDXImage from './components/MDX/Image';
+import WithReleaseSelect from './components/withReleaseSelect';
 import { ReleaseProvider } from './providers/releaseProvider';
 
 /**
@@ -32,6 +33,8 @@ export const clientMdxComponents = {
   DownloadButton: DownloadButton,
   // Renders a Download Link
   DownloadLink: DownloadLink,
+  // Renders a stateless Release Select Component
+  WithReleaseSelect: WithReleaseSelect,
   // Group of components that enable you to select versions for Node.js
   // releases and download selected versions. Uses `releaseProvider` as a provider
   Release: {

apps/site/pages/en/download/archive.mdx

@@ -4,7 +4,7 @@ layout: download-archive
 ---
 
 <WithDownloadArchive>
-  {({ binaries, installers, version, release, sources, navigation }) => (
+  {({ binaries, installers, version, release, sources }) => (
     <>
       <h1>Node.js® Download Archive</h1>
 
@@ -39,20 +39,8 @@ layout: download-archive
 
       </ul>
 
-      <details>
-        <summary>
-          <h3>Other releases</h3>
-        </summary>
-        <ul>
-          {navigation.map(({ href, label }) => (
-            <li key={label}>
-              <Link href={href}>
-                <h4>{label}</h4>
-              </Link>
-            </li>
-          ))}
-        </ul>
-      </details>
+      <h3>Other releases</h3>
+      <WithReleaseSelect defaultValue={`/download/${version}`} className="w-64" />
 
       <h2>Binary Downloads</h2>
       <DownloadsTable source={binaries} />

apps/site/util/download/archive.tsx

@@ -89,12 +89,19 @@ const getCompatibleArtifacts = ({
  * It creates a list of links for each major release, formatted with the major
  * version and codename if available.
  */
-export const getDownloadArchiveNavigation = (releases: Array<NodeRelease>) =>
-  releases.map(({ major, codename, versionWithPrefix }) => ({
+export const getDownloadArchiveNavigation = (releases: Array<NodeRelease>) => {
+  const items = releases.map(({ major, codename, versionWithPrefix }) => ({
     label: `Node.js v${major} ${codename ? `(${codename})` : ''}`,
-    href: `/download/${versionWithPrefix}`,
+    value: `/download/${versionWithPrefix}`,
   }));
 
+  return [
+    {
+      items,
+    },
+  ];
+};
+
 /**
  * Builds the release artifacts for a given Node.js release and version.
  * It retrieves binaries, installers, and source files based on the version.