Dark magic refactor

src/app/author/[author]/AuthorDisplay.tsx

@@ -112,23 +112,6 @@ export default function AuthorDisplay({
     )
   }
 
-  const NationalityDisplay = ({
-    nationality,
-  }: Readonly<{ nationality: string }>) => {
-    const nationalityData = nationalities[nationality]
-    const { demonym, flag } = nationalityData
-    return (
-      <div className='flex items-center'>
-        <img
-          src={flag}
-          className='w-10 shadow-md shadow-slate-300'
-          alt={`${demonym} flag`}
-        />
-        <span className='mx-3 font-semibold'>{demonym}</span>
-      </div>
-    )
-  }
-
   const Bio = () => {
     const { bio } = data
     if (!bio) return null
@@ -172,16 +155,6 @@ export default function AuthorDisplay({
         <hr className='mx-auto w-full h-1 border-0 bg-slate-200 my-2 rounded-md' />
         <OtherPositions />
         <FormerPositions />
-        <h1 className='text-3xl md:my-6 my-4 font-serif'>
-          Ethnicity and Nationality
-        </h1>
-        <div className='flex gap-2 flex-wrap'>
-          {nationality.map((n: string) => (
-            <Fragment key={n}>
-              <NationalityDisplay nationality={n} />
-            </Fragment>
-          ))}
-        </div>
         <Bio />
         {authorsDocuments.length > 0 && (
           <>

src/app/author/[author]/KonamiSnowfall.tsx

@@ -3,6 +3,7 @@ import Konami from 'react-konami-code'
 import { Snowfall } from 'react-snowfall'
 import { useEffect, useState } from 'react'
 import { nationalities } from '@/app/db/data'
+import { Fragment } from 'react'
 
 export default function KonamiSnowfall({
   nationalityList,
@@ -25,26 +26,52 @@ export default function KonamiSnowfall({
       imagesTemp.push(image)
     })
     setImages(imagesTemp)
-  }, [])
+  }, [nationalityList])
+
+  const NationalityDisplay = ({
+    nationality,
+  }: Readonly<{ nationality: string }>) => {
+    const nationalityData = nationalities[nationality]
+    const { demonym, flag } = nationalityData
+    return (
+      <div className='flex items-center'>
+        <img
+          src={flag}
+          className='w-10 shadow-md shadow-slate-300'
+          alt={`${demonym} flag`}
+        />
+        <span className='mx-3 font-semibold'>{demonym}</span>
+      </div>
+    )
+  }
 
   return (
     <>
       <Konami action={handleKonami} />
       {snowfallActivated && (
-        <Snowfall
+        <div>
-          snowflakeCount={500}
+          <div className="nationalities-list">
-          color='white'
+            {nationalityList.map((n: string) => (
-          images={images}
+              <Fragment key={n}>
-          radius={[20, 60]}
+                <NationalityDisplay nationality={n} />
-          style={{
+              </Fragment>
-            position: 'absolute',
+            ))}
-            top: 0,
+          </div>
-            left: 0,
+          <Snowfall
-            zIndex: -1,
+            snowflakeCount={500}
-            pointerEvents: 'none',
+            color='white'
-            height: `${document.documentElement.scrollHeight}px`,
+            images={images}
-          }}
+            radius={[20, 60]}
-        />
+            style={{
+              position: 'absolute',
+              top: 0,
+              left: 0,
+              zIndex: -1,
+              pointerEvents: 'none',
+              height: `${document.documentElement.scrollHeight}px`,
+            }}
+          />
+        </div>
       )}
     </>
   )

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

@@ -73,13 +73,13 @@ const VersionChooser = ({
         </button>
       </Link>
       <button
-        className='ml-2 h-10 px-2.5 bg-slate-300 rounded-md'
+        className='button-alternate'
         onClick={handleClick}
       >
         Export BibTeX
       </button>
       <select
-        className='ml-2 h-10 px-2.5 bg-slate-300 rounded-md'
+        className='select-default'
         value={`v${selectedRevision}`}
         onChange={(e) => {
           setSelectedRevision(parseInt(e.target.value.replace(/\D/g, ''), 10))

src/app/globals.css

@@ -30,11 +30,11 @@ option {
 }
 
 .button-alternate {
-  @apply bg-slate-100 text-slate-700 hover:bg-blue-100 font-semibold rounded py-2 px-4 my-2 shadow-sm shadow-slate-400;
+  @apply bg-slate-100 text-slate-700 hover:bg-blue-100 font-semibold rounded py-2 px-4 my-2 shadow-sm shadow-slate-400 mx-2;
 }
 
 .select-default {
-  @apply bg-slate-100 text-slate-700 hover:bg-blue-100 font-semibold rounded py-2 px-4 my-2 shadow-sm shadow-slate-400;
+  @apply bg-slate-100 text-slate-700 hover:bg-blue-100 font-semibold rounded py-2 px-4 my-2 shadow-sm shadow-slate-400 mx-2;
 }
 
 .badge-base {