Integrate footer component

pages/components/Footer.js

@@ -0,0 +1,29 @@
+import "tailwindcss/tailwind.css";
+import Link from 'next/link';
+import useTranslation from 'next-translate/useTranslation'
+import { useRouter } from 'next/router'
+export default function Footer(props) {
+    
+    const router = useRouter()
+    const { locale, locales, defaultLocale, pathname } = router
+    const { t, lang } = useTranslation("common")
+    const footer = t('footer')
+    const source = t('source')
+    const tos = t('tos')
+        return (
+          <>
+            <div className="container mx-auto px-6">
+            <div className="mt-16 flex flex-col items-center">
+                <div className="sm:w-full text-center py-6">
+                    <p className="text-sm font-bold mb-2">
+                        {footer} / <Link href="https://github.com/yudejp/yude.  jp"><a className="hover:underline">{source}</a></Link>
+                    </p>
+                    <p className="text-sm font-bold mb-2">
+                        <Link href="https://scrapbox.io/yude/yude.  jp_%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9%E5%88%A9%E7%94%A8%E8  %A6%8F%E7%B4%84"><a className="hover:underline">{tos}</a></Link>
+                    </p>
+                </div>
+              </div>
+            </div>
+          </>
+            );
+}

pages/components/Layout.js

@@ -1,10 +1,10 @@
 import Head from "next/head"
-import Link from "next/link"
 import "tailwindcss/tailwind.css";
 import useTranslation from 'next-translate/useTranslation'
 import { useRouter } from 'next/router'
 import React, { useEffect, useState } from 'react'
-import { useTheme } from "next-themes";
+import Footer from "./Footer"
+import Navbar from "./Navbar"
 
 const Layout = (props) => {
   const { title, children } = props
@@ -23,6 +23,7 @@ const Layout = (props) => {
         <link rel="icon" href="/static/images/favicon.ico" />
       </Head>
       <main>
+      <Navbar />
         <div className="page-main">
           {children}
         </div>
@@ -31,20 +32,8 @@ const Layout = (props) => {
         body {
             text-align: center;
         }
-        
       `}</style>
-      <div className="container mx-auto px-6">
+      <Footer />
-        <div className="mt-16 flex flex-col items-center">
-            <div className="sm:w-full text-center py-6">
-                <p className="text-sm font-bold mb-2">
-                    {footer} / <Link href="https://github.com/yudejp/yude.jp"><a className="hover:underline">{source}</a></Link>
-                </p>
-                <p className="text-sm font-bold mb-2">
-                    <Link href="https://scrapbox.io/yude/yude.jp_%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9%E5%88%A9%E7%94%A8%E8%A6%8F%E7%B4%84"><a className="hover:underline">{tos}</a></Link>
-                </p>
-            </div>
-          </div>
-        </div>
       </main>
     </div>
   )

pages/house.js

@@ -1,5 +1,4 @@
 import Layout from "./components/Layout"
-import Navbar from "./components/Navbar"
 import useTranslation from 'next-translate/useTranslation'
 
 import { useRouter } from 'next/router'
@@ -13,7 +12,6 @@ export default function About(props) {
   return (
 
     <Layout title={house}>
-      <Navbar />
       <p className="my-2 text-3xl">{house}</p>
       <div className="mx-9">
       <iframe className="w-full h-96" src="https://mackerel.io/embed/public/embed/4mVIU29WCRVZgHUxQPzWsfXo953uxiAegbjDb83hTQ7szesCunwdpVkBIzhnLc9i?period=1d" frameborder="0" scrolling="no"></iframe>

pages/index.js

@@ -1,5 +1,4 @@
 import Layout from "./components/Layout"
-import Navbar from "./components/Navbar"
 import Link from 'next/link'
 import { faDiscord, faGit, faMastodon, faGithub } from '@fortawesome/free-brands-svg-icons'
 import { faBlog, faBook, faUser, faServer, faHouseUser } from '@fortawesome/free-solid-svg-icons'
@@ -19,7 +18,6 @@ export default function Index(props) {
   return (
 
     <Layout title={home}>
-      <Navbar />
       <div className="my-9">
         <div className="m-10">
         <Image

pages/profile.js

@@ -1,5 +1,4 @@
 import Layout from "./components/Layout"
-import Navbar from "./components/Navbar"
 import useTranslation from 'next-translate/useTranslation'
 import { faDiscord, faTwitter, faGithub, faKeybase, faInstagram, faMastodon, faSteam } from '@fortawesome/free-brands-svg-icons'
 import { faEnvelope, faBirthdayCake, faMapPin, faSchool, faPhone, faInfo, faKey, faDownload, faEye } from '@fortawesome/free-solid-svg-icons'
@@ -34,7 +33,6 @@ export default function About(props) {
   return (
 
     <Layout title={about}>
-      <Navbar />
       <div className="my-9 mx-8">
 
         {

pages/status.js

@@ -1,5 +1,4 @@
 import Layout from "./components/Layout"
-import Navbar from "./components/Navbar"
 import useTranslation from 'next-translate/useTranslation'
 
 import { useRouter } from 'next/router'
@@ -17,7 +16,6 @@ export default function About(props) {
   return (
 
     <Layout title={status}>
-      <Navbar />
         <div className="my-9 mx-9">
         {
          // Heading