refactor: simplify props to just word list

Uses first word in list as initial text; fixes bug where initial text would never render again

Author: wackerow

app/[locale]/10years/_components/TenYearHero.tsx

@@ -7,7 +7,7 @@ import Morpher from "@/components/Morpher"
 import TenYearBackgroundImage from "@/public/images/10-year-anniversary/10-year-background.png"
 import TenYearGraphicImage from "@/public/images/10-year-anniversary/10-year-graphic.png"
 
-const [initialText, ...initialWords] = [
+const WORDS = [
   "censorship resistance",
   "100% uptime",
   "decentralization",
@@ -44,14 +44,10 @@ const TenYearHero = () => (
           className="select-none opacity-0 max-md:hidden"
           data-label="space-holder"
         >
-          {initialText}
+          {words[0]}
         </span>
         <span className="text-3xl font-bold text-accent-b md:absolute md:start-0 md:text-nowrap">
-          <Morpher
-            text={initialText}
-            words={initialWords}
-            charSet="abcdfgijklnopqsvwxyz"
-          />
+          <Morpher words={WORDS} charSet="abcdfgijklnopqsvwxyz" />
         </span>
       </span>
     </p>

src/components/Homepage/LanguageMorpher.tsx

@@ -41,8 +41,8 @@ const LanguageMorpher = () => {
       variant="ghost"
     >
       <Morpher
-        text="Ethereum"
         words={[
+          "Ethereum",
           "以太坊",
           "イーサリアム",
           "Etérium",

src/components/Morpher.tsx

@@ -3,17 +3,15 @@
 import { useEffect, useState } from "react"
 
 type MorpherProps = {
-  text: string
   words: string[]
   charSet?: string
 }
 
 const Morpher = ({
-  text,
   words,
   charSet = "abcdefghijklmnopqrstuvwxyz",
 }: MorpherProps) => {
-  const [state, setState] = useState({ text, words })
+  const [state, setState] = useState({ text: words[0], words })
 
   // loops over chars to morph a text to another
   const morpher = (start: string, end: string): void => {