feat (v1.0.0): initial refactor and redesign

components/objects/RandomFooterMsg.tsx

@@ -1,83 +1,46 @@
 "use client"
 
-import {
-  SiNextdotjs,
-  SiLucide,
-  SiVercel,
-  SiSimpleicons,
-  SiFontawesome,
-  SiShadcnui,
-  SiTailwindcss
-} from "react-icons/si"
 import Link from 'next/link'
-import { useState, useEffect } from 'react'
+import { footerMessages } from './footerMessages'
 
-export const footerMessages = [
-  [
-    "Built with Next.js",
-    "https://nextjs.org",
-    <SiNextdotjs key="nextjs" className="text-md mr-2" />
-  ],
-  [
-    "Icons by Lucide",
-    "https://lucide.dev/",
-    <SiLucide key="lucide" className="text-md mr-2" />
-  ],
-  [
-    "Icons by Simple Icons",
-    "https://simpleicons.org/",
-    <SiSimpleicons key="simpleicons" className="text-md mr-2" />
-  ],
-  [
-    "Font by Vercel",
-    "https://vercel.com/font",
-    <SiVercel key="vercel" className="text-md mr-2" />
-  ],
-  [
-    "Icons by Font Awesome",
-    "https://fontawesome.com/",
-    <SiFontawesome key="fontawesome" className="text-md mr-2" />
-  ],
-  [
-    "Components by Shadcn",
-    "https://ui.shadcn.com/",
-    <SiShadcnui key="shadcn" className="text-md mr-2" />
-  ],
-  [
-    "Styled with Tailwind",
-    "https://tailwindcss.com/",
-    <SiTailwindcss key="tailwind" className="text-md mr-2" />
-  ]
-]
+interface RandomFooterMsgProps {
+  index?: number
+}
 
-export default function RandomFooterMsg() {
-  const [randomIndex, setRandomIndex] = useState(0)
-  const [isMounted, setIsMounted] = useState(false)
+const fallbackMessage = footerMessages[0] ?? null
 
-  useEffect(() => {
-    setIsMounted(true)
-    setRandomIndex(Math.floor(Math.random() * footerMessages.length))
-  }, [])
-
-  if (!isMounted) {
-    const [message, url, icon] = footerMessages[0]
-    return (
-      <Link href={String(url)} target="_blank" rel="noopener noreferrer" className="hover:text-white transition-colors mb-2 sm:mb-0">
-        <div className="flex items-center justify-center">
-          {icon}
-          {message}
-        </div>
-      </Link>
-    )
+const getMessageByIndex = (index: number | undefined) => {
+  if (!footerMessages.length) {
+    return null
   }
 
-  const [message, url, icon] = footerMessages[randomIndex]
+  if (typeof index !== 'number' || Number.isNaN(index)) {
+    return fallbackMessage
+  }
+
+  const safeIndex = ((Math.floor(index) % footerMessages.length) + footerMessages.length) % footerMessages.length
+  return footerMessages[safeIndex] ?? fallbackMessage
+}
+
+export default function RandomFooterMsg({ index }: RandomFooterMsgProps) {
+  const message = getMessageByIndex(index)
+
+  if (!message) {
+    return null
+  }
+
+  const { text, url, Icon } = message
 
   return (
-    <Link href={String(url)} target="_blank" rel="noopener noreferrer" className="hover:text-white transition-colors mb-2 sm:mb-0">
+    <Link
+      href={url}
+      target="_blank"
+      rel="noopener noreferrer"
+      className="hover:text-white transition-colors mb-2 sm:mb-0"
+    >
       <div className="flex items-center justify-center">
-        {icon}
-        {message}
+        <Icon className="text-md mr-2" />
+        {text}
       </div>
     </Link>
   )