Add document version chooser

src/app/document/view/[slug]/DocumentViewer.tsx

@@ -1,4 +1,4 @@
-import { DocumentType, documents } from '@/app/db/data'
+import { documents } from '@/app/db/data'
 import { Zilla_Slab } from 'next/font/google'
 import { epoch2datestring } from '@/app/utils/epoch2datestring'
 import {
@@ -11,11 +11,14 @@ import {
 import { ItemBadge, Status } from '@/app/components/Badges'
 import Link from 'next/link'
 import { notFound } from 'next/navigation'
+import VersionChooser from './VersionChooser'
 
 const zillaSlab = Zilla_Slab({ subsets: ['latin'], weight: ['500'] })
 
-export default function DocumentViewer({ slug }: Readonly<{ slug: string }>) {
+const DocumentViewer = ({ slug }: Readonly<{ slug: string }>) => {
-  const { manifest, abstract, file, citation } = documents[slug]
+  const doc = documents[slug]
+  const { manifest, abstract, file, citation } = doc
+
   if (!manifest) return notFound()
   const {
     title,
@@ -51,7 +54,7 @@ export default function DocumentViewer({ slug }: Readonly<{ slug: string }>) {
         </span>
       </p>
       <div className='flex flex-wrap gap-2'>
-        <ItemBadge itemName={type as DocumentType} />
+        <ItemBadge itemName={type} />
         <Status statusName={status} />
         <span className='border-gray-200 border-2 rounded px-2 py-1.5 mr-2 shadow-sm shadow-slate-300'>
           Revision {latest}
@@ -78,25 +81,9 @@ export default function DocumentViewer({ slug }: Readonly<{ slug: string }>) {
         <span className='font-bold'>Cite as: </span>
         {citation ? <>{citation}</> : <>eeXiv:{slug}</>}
       </p>
-      <Link
+      <VersionChooser doc={doc} slug={slug} />
-        href={`/download/${slug}/file${latest}${file === 'other' ? '' : `.${file}`}`}
-        download={`${slug}-rev-${latest}${file === 'other' ? '' : `.${file}`}`}
-        target='_blank'
-      >
-        <button className='button-default'>
-          Download{' '}
-          {(() => {
-            switch (file) {
-              case 'other':
-                return <></>
-              case 'tar.gz':
-                return 'Tarball'
-              default:
-                return file.toUpperCase()
-            }
-          })()}
-        </button>
-      </Link>
     </div>
   )
 }
+
+export default DocumentViewer

src/app/document/view/[slug]/VersionChooser.tsx

@@ -0,0 +1,62 @@
+'use client'
+import { useState } from 'react'
+import { Document } from '@/app/db/data'
+import Link from 'next/link'
+
+const VersionChooser = ({
+  doc,
+  slug,
+}: Readonly<{ doc: Document; slug: string }>) => {
+  const { file } = doc
+  const {
+    title,
+    authors,
+    topics,
+    dates,
+    references,
+    code,
+    type,
+    latest,
+    reviewers,
+    status,
+  } = doc.manifest
+
+  const fileEnding = file === 'other' ? '' : `.${file}`
+  const [selectedRevision, setSelectedRevision] = useState<number>(latest) // Initialize the selected revision with the latest revision
+
+  return (
+    <div>
+      <Link
+        href={`/download/${slug}/file${selectedRevision}${fileEnding}`}
+        target='_blank'
+      >
+        <button className='button-default'>
+          Download{' '}
+          {(() => {
+            switch (file) {
+              case 'other':
+                return <></>
+              case 'tar.gz':
+                return 'Tarball'
+            }
+          })()}
+        </button>
+      </Link>
+      <select
+        className='ml-2 p-2.5 bg-slate-300 rounded-md'
+        value={`v${selectedRevision}`}
+        onChange={(e) => { setSelectedRevision(parseInt(e.target.value.replace(/\D/g, ''), 10)) }}
+      >
+        {Array.from({ length: latest }, (_, index) => index + 1).map(
+          (version) => (
+            <option key={version} value={`v${version}`} className='p-2.5'>
+              {version == latest ? 'Latest' : `v${version}`}
+            </option>
+          )
+        )}
+      </select>
+    </div>
+  )
+}
+
+export default VersionChooser

src/app/globals.css

@@ -20,6 +20,11 @@ a:hover {
   text-decoration: underline;
 }
 
+option {
+  @apply font-sans;
+  @apply p-4;
+}
+
 .button-default {
   @apply bg-blue-600 text-slate-100 hover:bg-blue-400 font-semibold rounded py-2 px-4 my-2 shadow-sm shadow-slate-400;
 }