feat: 🎸 React Icon を導入し、フッタをコンポーネントとして切り出した (#53)

Author: nikukyugamer

package.json

@@ -14,6 +14,7 @@
     "preline": "^1.9.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-icons": "^4.10.1",
     "tailwindcss": "3.3.2",
     "typescript": "5.1.6"
   },

src/app/cities/page.tsx

@@ -1,6 +1,7 @@
 'use client'
 
 import cities from '@/app/resource/cities.json'
+import { GensosenkyoFooter } from '@/app/components/GensosenkyoFooter'
 
 const Cities = () => {
   return (
@@ -32,7 +33,7 @@ const Cities = () => {
       <div className="my-6">
         <hr />
       </div>
-      <div className="text-center pt-2 pb-6">2023 （株）幻水総選挙</div>
+      <GensosenkyoFooter />
     </div>
   )
 }

src/app/components/GensosenkyoFooter.tsx

@@ -0,0 +1,19 @@
+import Link from 'next/link'
+import { BiLinkExternal } from 'react-icons/bi'
+
+export const GensosenkyoFooter = () => {
+  return (
+    <div className="relative overflow-hidden">
+      <div className="text-center">
+        <h1 className="font-bold text-white dark:text-white pt-2 pb-6">
+          <Link href="https://election.suikoden.info/" passHref>
+            <div className="flex flex-row justify-center">
+              幻水総選挙2023
+              <BiLinkExternal className="pt-1" />
+            </div>
+          </Link>
+        </h1>
+      </div>
+    </div>
+  )
+}

src/app/headquarters-characters/page.tsx

@@ -1,6 +1,7 @@
 'use client'
 
 import headquartersCharacters from '@/app/resource/headquartersCharacters.json'
+import { GensosenkyoFooter } from '@/app/components/GensosenkyoFooter'
 
 const Cities = () => {
   return (
@@ -34,7 +35,8 @@ const Cities = () => {
       <div className="my-6">
         <hr />
       </div>
-      <div className="text-center pt-2 pb-6">2023 （株）幻水総選挙</div>
+
+      <GensosenkyoFooter />
     </div>
   )
 }

src/app/page.tsx

@@ -1,4 +1,5 @@
 import Link from 'next/link'
+import { GensosenkyoFooter } from '@/app/components/GensosenkyoFooter'
 
 const Home = async () => {
   return (
@@ -41,7 +42,7 @@ const Home = async () => {
           <div className="my-6">
             <hr />
           </div>
-          <div className="py-2">2023 （株）幻水総選挙</div>
+          <GensosenkyoFooter />
         </div>
       </div>
     </div>

yarn.lock

@@ -2041,6 +2041,11 @@ [email protected]:
     loose-envify "^1.1.0"
     scheduler "^0.23.0"
 
+react-icons@^4.10.1:
+  version "4.10.1"
+  resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-4.10.1.tgz#3f3b5eec1f63c1796f6a26174a1091ca6437a500"
+  integrity sha512-/ngzDP/77tlCfqthiiGNZeYFACw85fUjZtLbedmJ5DTlNDIwETxhwBzdOJ21zj4iJdvc0J3y7yOsX3PpxAJzrw==
+
 react-is@^16.13.1:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"