From 859aa2bbaba7861a7c99b3f24de57895438ce8da Mon Sep 17 00:00:00 2001
From: yudejp <i@yude.jp>
Date: Mon, 9 Aug 2021 11:04:26 +0900
Subject: [PATCH] Modularize banners

---
 pages/components/Footer/BlueRibbon.js | 19 +++++++++++++++++++
 pages/components/Footer/happybusy.js  | 19 ++++++++++---------
 pages/index.js                        | 25 +++++++------------------
 3 files changed, 36 insertions(+), 27 deletions(-)
 create mode 100644 pages/components/Footer/BlueRibbon.js

diff --git a/pages/components/Footer/BlueRibbon.js b/pages/components/Footer/BlueRibbon.js
new file mode 100644
index 0000000..a94f0de
--- /dev/null
+++ b/pages/components/Footer/BlueRibbon.js
@@ -0,0 +1,19 @@
+// Next.js
+import Link from 'next/link'
+import Image from 'next/image'
+
+const happybusy = (props) => {
+  return (
+    <Link href="https://www.eff.org/pages/blue-ribbon-campaign">
+      <a>
+        <Image
+          src="/images/brstrip.gif"
+          width={150}
+          height={41}
+        />
+      </a>
+    </Link>
+  )
+}
+
+export default happybusy
\ No newline at end of file
diff --git a/pages/components/Footer/happybusy.js b/pages/components/Footer/happybusy.js
index b2cbcfe..7ca445d 100644
--- a/pages/components/Footer/happybusy.js
+++ b/pages/components/Footer/happybusy.js
@@ -1,18 +1,19 @@
 // Next.js
 import Link from 'next/link'
+import Image from 'next/image'
 
-const happybusy = (props) => {
+const HappyBusy = (props) => {
   return (
     <Link href="https://sites.google.com/site/happybusy/">
-            <a>
-              <Image
-                src="/images/busy_banner.png"
-                width={200}
-                height={42}
-              />
-            </a>
+        <a>
+          <Image
+            src="/images/busy_banner.png"
+            width={200}
+            height={42}
+          />
+        </a>
     </Link>
   )
 }
 
-export default happybusy
\ No newline at end of file
+export default HappyBusy
\ No newline at end of file
diff --git a/pages/index.js b/pages/index.js
index c6e95c7..9d721e9 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -2,6 +2,9 @@
 import Layout from "./components/Layout"
 // Menu
 import FontAwesomeMenu from "./components/Menu/FontAwesomeMenu"
+// Banner
+import BlueRibbon from "./components/Footer/BlueRibbon"
+import HappyBusy from "./components/Footer/HappyBusy"
 // Next.js
 import Link from 'next/link'
 import Image from 'next/image'
@@ -43,26 +46,12 @@ export default function Index(props) {
           <FontAwesomeMenu href="/mutual" icon="faHeart" />
         </div>
         
+        {/* Banner */}
         <div className="mx-auto mt-10">
-          <Link href="https://www.eff.org/pages/blue-ribbon-campaign">
-            <a>
-              <Image
-                src="/images/brstrip.gif"
-                width={150}
-                height={41}
-              />
-            </a>
-          </Link>
-          <Link href="https://sites.google.com/site/happybusy/">
-            <a>
-              <Image
-                src="/images/busy_banner.png"
-                width={200}
-                height={42}
-              />
-            </a>
-          </Link>
+          <BlueRibbon />
+          <HappyBusy />
         </div>
+        
       </div>
     </Layout>
   )