move header/footer to RootLayout

src/components/HeaderItem.tsx

@@ -12,7 +12,7 @@ export default function HeaderItem({
 }: HeaderItemProps) {
     return (
         <Link
-            className="inline text-green-500 hover:underline font-bold text-3xl pr-2" 
+            className="inline text-green-500 hover:underline font-bold text-3xl text-center" 
             href={linkTo} 
             target={newWindow ? "_blank" : "_self"}
         >

src/components/RootLayout.tsx

@@ -1,21 +1,33 @@
 // component imports
 import Head from "./Head"
+import Header from "./header";
+import Footer from "./footer";
 
 // react imports
 import React from 'react';
 
 type LayoutProps = {
     children: React.ReactNode
-    protectedPage?: boolean
+    protectedPage?: boolean,
+    showHeader: boolean,
+    isHomePage: boolean
 }
 
-export default function RootLayout({ children }: LayoutProps) {
+export default function RootLayout({ 
+    children,
+    showHeader = true,
+    isHomePage = true
+}: LayoutProps) {
     return (
         <main className="bg-black h-screen flex flex-col justify-center items-center overflow-y-hidden">
+            { showHeader && <Header isHomePage={isHomePage} />}
+
             <Head />
             <div className="flicker">
                 {children}
             </div>
+
+            <Footer />
         </main>
     )
 }

src/components/header.tsx

@@ -1,18 +1,18 @@
 import HeaderItem from "./HeaderItem";
 
 type HeaderProps = {
-    isNotHomePage: boolean
+    isHomePage: boolean
 }
 
 export default function Header({
-    isNotHomePage = false
+    isHomePage = false
 }: HeaderProps) {
     return (
         <>
-            <div className="text-white max-w-md mx-auto pt-2 pb-4 text-center">
-                <div className="inline-block pb-2 space-x-6">
+            <div className="text-white mx-auto my-4 lg:max-w-md">
+                <div className="inline-block pb-2 space-x-2">
                     <HeaderItem content="HOME" linkTo={
-                        isNotHomePage ? "/?noAnimation"
+                        !isHomePage ? "/?noAnimation"
                         : "/"
                     } />
                     <HeaderItem content="LINKS" linkTo="/links" />

src/pages/about.tsx

@@ -1,16 +1,12 @@
 import RootLayout from "@/components/RootLayout";
-import Footer from "@/components/footer";
-import Header from "@/components/header";
 
 export default function AboutPage() {
     return (
-        <RootLayout>
-            <Header isNotHomePage={true} />
+        <RootLayout isHomePage={false} showHeader={true}>
             <div className="text-center text-green-500">
                 <h1 className="font-bold text-2xl">About this website</h1>
                 <p className="max-w-10">This is just a hobby project I thought was cool!<br /> I plan to play with it a bit to grasp more CSS, but so far, pretty cool right?</p>
             </div>
-            <Footer />
         </RootLayout>
     )
 }

src/pages/index.tsx

@@ -1,11 +1,10 @@
 import RootLayout from '@/components/RootLayout';
-import Header from '@/components/header';
-import Footer from '@/components/footer';
 import { useState, useEffect } from 'react';
 
 export default function Home() {
     const [doAnimation, setDoAnimation] = useState<boolean>(false);
     const [pastLogo, setPastLogo] = useState<boolean>(false);
+    const [pastAnim, setPastAnim] = useState<boolean>(false);
     const [text, setText] = useState<string[]>([]);
 
     const generateRandomTextString = () => {
@@ -22,6 +21,7 @@ export default function Home() {
 
     useEffect(() => {
         if (location.href.includes("?noAnimation")) {
+            setPastAnim(true)
             const logoElement = document.getElementById("pipboy");
             const textElement = document.getElementById("textwall");
             const mainElement = document.getElementById("mainelement");
@@ -61,6 +61,7 @@ export default function Home() {
             setTimeout(() => {
                 clearInterval(interval)
                 if (textElement && mainElement) {
+                    setPastAnim(true)
                     textElement.style.display = "none"
                     mainElement.style.display = "block"
                 }
@@ -69,7 +70,7 @@ export default function Home() {
     }, [pastLogo, doAnimation])
 
     return (
-        <RootLayout>
+        <RootLayout isHomePage={true} showHeader={pastAnim}>
             {/* "logo", hidden after 4 seconds */}
             <h1 className="text-green-500 text-9xl font-bold italic select-none" id="pipboy">Pip-Boy</h1>
 
@@ -78,14 +79,12 @@ export default function Home() {
 
             {/* and the content :) */}
             <div className="text-green-500 flicker max-w-1/2 hidden" id="mainelement">
-                <Header isNotHomePage={false} />
-                <div className="text-left">
+                <div className="text-center">
                     <p className="text-md">
                         <span className="font-bold text-2xl">Hello traveller!</span>
                     </p>
                     <p>Welcome to my website! Feel free to explore & learn more about me :)</p>
                 </div>
-                <Footer />
             </div>
         </RootLayout>
     )

src/pages/links.tsx

@@ -1,61 +1,33 @@
 import RootLayout from "@/components/RootLayout";
-import Footer from "@/components/footer";
-import Header from "@/components/header";
 import Link from "next/link";
-import {useState} from 'react';
-
-// icons
-import {
-    Twitter,
-    MailOption,
-    AddCircle
-} from 'grommet-icons'
 
 export default function LinksPage() {
-    const [icon, setIcon] = useState(<AddCircle size="large" />);
-
     return (
-        <RootLayout>
-            <Header isNotHomePage={true} />
-            <div className="text-green-500 max-h-96">
-                <h1 className="font-bold text-3xl ml-2">My Links!</h1>
-                <div className="space-y-2 float-left">
+        <RootLayout showHeader={true} isHomePage={false}>
+            <div className="text-green-500">
+                <h1 className="text-3xl font-bold">
+                    My Links!
+                </h1>
+
+                <div className="space-y-2">
                     <Link
                         href="https://twitter.com/avvex__"
                         target="_blank"
-                        onMouseOver={() => {
-                            setIcon(<Twitter size="large" />)
-                        }}
-                        onMouseLeave={() => {
-                            setIcon(<AddCircle size="large" />)
-                        }}
                     >
                         <div className="hover:bg-green-500 hover:text-black">
-                            <h1 className="text-2xl mr-32 ml-2">Twitter</h1>
+                            <h1 className="text-2xl text-center">Twitter</h1>
                         </div>
                     </Link>
                     <Link
                         href="https://mast.thatalex.dev/@alex"
                         target="_blank"
-                        onMouseOver={() => {
-                            setIcon(<MailOption size="large" />)
-                        }}
-                        onMouseLeave={() => {
-                            setIcon(<AddCircle size="large" />)
-                        }}
                     >
                         <div className="hover:bg-green-500 hover:text-black">
-                            <h1 className="text-2xl mr-32 ml-2">Mastodon</h1>
+                            <h1 className="text-2xl text-center">Mastodon</h1>
                         </div>
                     </Link>
                 </div>
-
-                <div className="float-right">
-                    {/* <Twitter size='xlarge' className="mr-24" /> */}
-                    {icon}
             </div>
-            </div>
-            <Footer />
         </RootLayout>
     )
 }

src/pages/projects.tsx

@@ -1,12 +1,9 @@
 import RootLayout from "@/components/RootLayout";
-import Footer from "@/components/footer";
-import Header from "@/components/header";
 import Link from "next/link";
 
 export default function ProjectsPage() {
     return (
-        <RootLayout>
-            <Header isNotHomePage={true} />
+        <RootLayout showHeader={true} isHomePage={false}>
             <div className="space-y-2 text-center">
                 <Link href="https://github.com/azpha/splitstat" target="_blank">
                     <div className="hover:bg-green-500 hover:text-black text-green-500">
@@ -28,7 +25,6 @@ export default function ProjectsPage() {
                         <h1 className=" text-2xl mx-32">Watchlist</h1>
                     </div>
                 </Link>
-                <Footer />
             </div>
         </RootLayout>
     )

src/pages/radio.tsx

@@ -1,6 +1,4 @@
 import RootLayout from "@/components/RootLayout";
-import Footer from "@/components/footer";
-import Header from "@/components/header";
 import { api } from "@/utils/api";
 
 // next components
@@ -11,23 +9,29 @@ export default function MusicPage() {
     const { data: musicData, fetchStatus} = api.misc.song.useQuery();
 
     return (
-        <RootLayout>
-            <Header isNotHomePage={true} />
+        <RootLayout showHeader={true} isHomePage={false}>
             <div className="text-green-500 flicker max-w-1/2">
-                <div className="float-left">
+                <div className="float-left mr-10">
                     {
                         fetchStatus === "idle" ?
                             musicData?.data.tracks.map((v,k) => {
                                 return <div key={k}>
                                     <div className={`text-lg ${k === 0 ? "bg-green-500 text-black" : "hover:bg-green-500 hover:text-black"}`}>
                                         <Link href={v.url} target="_blank">
-                                            <h1 className="ml-2 mr-36 truncate max-w-10">{k === 0 && "■"} {v.name}</h1>
+                                            <h1 className="ml-2 mr-10 truncate max-w-10">{k === 0 && "■"} {v.name}</h1>
                                         </Link>
                                     </div>
                                 </div>
                             })
                         : <h1 className="font-bold text-green-500">Fetching..</h1>
                     }
+                    <Link
+                        href="https://last.fm/user/lulawex"
+                        target="_blank"
+                        className="hover:underline"
+                    >
+                        <p>Powered by Last.fm</p>
+                    </Link>
                 </div>
                 <div className="float-right">
                     {
@@ -41,7 +45,6 @@ export default function MusicPage() {
                     }
                 </div>
             </div>
-            <Footer />
         </RootLayout>
     )
 }