Updated links logic, new admin dash

src/components/Head.tsx

@@ -0,0 +1,11 @@
+import Head from 'next/head';
+
+export default function HeadTags() {
+    return (
+        <Head>
+            <title>alexavfrantz</title>
+            <meta property="og:title" content="alexavfrantz.com" />
+            <meta property="og:description" content="Welcome to my personal website! See my favorite music, read my reviews on games and more!" />
+        </Head>
+    )
+}

src/components/InputOption.tsx

@@ -0,0 +1,19 @@
+type InputOptionProps = {
+    label: string,
+    inputName: string,
+    isTextArea?: boolean
+}
+
+export default function InputOption(props: InputOptionProps) {
+    return (
+        <div className="pt-2 pb-2">
+            <label className="font-bold">{props.label}</label><br />
+            {
+                props.isTextArea ?
+                <textarea className="bg-gray-800 rounded-sm text-white resize-none h-32 w-72" name={props.inputName} />
+                :
+                <input className="bg-gray-800 rounded-sm text-white" name={props.inputName} />
+            }
+        </div>
+    )
+}

src/components/RootLayout.tsx

@@ -0,0 +1,55 @@
+// component imports
+import Header from "./header";
+import Footer from "./footer";
+import Head from "./Head"
+
+// react imports
+import React from 'react';
+
+// next modules
+import { useSession } from "next-auth/react";
+import Router from 'next/router';
+
+type LayoutProps = {
+    children: React.ReactNode
+    protectedPage?: boolean
+}
+
+export default function RootLayout({ children, protectedPage }: LayoutProps) {
+    const {status} = useSession()
+
+    if (protectedPage) {
+        if (status === "loading") {
+            return (
+                <main className="min-h-screen bg-black">
+                    <Head />
+                    <p>Loading...</p>
+                </main>
+            )
+        }
+
+        if (status === "unauthenticated") {
+            Router.replace("/").catch(() => {
+                console.error("Failed to reroute user!")
+            })
+        } else {
+            return (
+                <main className="min-h-screen bg-black">
+                    <Head />
+                    <Header />
+                    {children}
+                    <Footer />
+                </main>
+            )
+        }
+    } else {
+        return (
+            <main className="min-h-screen bg-black">
+                <Head />
+                <Header />
+                {children}
+                <Footer />
+            </main>
+        )
+    }
+}

src/components/SocialCard.tsx

@@ -1,8 +1,11 @@
 import Link from "next/link"
+import { Trash } from "grommet-icons"
 
 type SocialCardProps = {
     name: string,
-    url: string
+    url: string,
+    showDelete: boolean,
+    deleteCallback: () => void
 }
 
 export default function SocialMediaCard(props: SocialCardProps) {
@@ -11,6 +14,9 @@ export default function SocialMediaCard(props: SocialCardProps) {
             <Link href={props.url}>
                 {props.name}
             </Link>
+            {
+                props.showDelete && <Trash onClick={props.deleteCallback} color="plain" className="pl-2 hover:cursor-pointer" />
+            }
         </div>
     )
 }

src/components/footer.tsx

@@ -1,4 +1,4 @@
-import { Twitter, LinkedinOption, MailOption } from "grommet-icons"
+import { Twitter, LinkedinOption } from "grommet-icons"
 import Link from 'next/link';
 
 export default function Footer() {
@@ -16,17 +16,13 @@ export default function Footer() {
                 <p className="text-center">
                     &copy; Alex Frantz, 2023
                 </p>
-                <p className="text-center">
+                <p className="text-center space-x-2">
                     <Link href="https://twitter.com/avvex__" target="_blank" rel="noreferrer">
-                        <Twitter color='plain' className="pr-2" size="30" />
+                        <Twitter color='plain' size="30" />
                     </Link>
 
                     <Link href="https://linkedin.com/in/thatalex" target="_blank" rel="noreferrer">
-                        <LinkedinOption className="pr-2" size="30" />
-                    </Link>
-
-                    <Link href="mailto:alex@alexavfrantz.com" target="_blank" rel="noreferrer">
-                        <MailOption className="pr-2" size="30" />
+                        <LinkedinOption size="30" />
                     </Link>
                 </p>
             </div>

src/components/header.tsx

@@ -2,15 +2,22 @@ import {useSession, signIn, signOut} from 'next-auth/react';
 import HeaderItem from "./HeaderItem";
 
 export default function Header() {
-    const { data: session, status } = useSession()
+    const { status } = useSession()
 
     return (
         <>
-            <div className="text-white w-52 pt-2 pb-4 mx-auto">
+            <div className="text-white max-w-sm pt-2 pb-4 mx-auto">
                 <p className="text-2xl font-bold">alex</p>
                 <div className="inline-block pb-2">
                     <HeaderItem content="home" linkTo="/" />
                     <HeaderItem content="reviews" linkTo="/reviews" />
+                    <HeaderItem content="links" linkTo="/links" />
+                    { status === "authenticated" &&
+                        <HeaderItem 
+                            content="create"
+                            linkTo="/create"
+                        />
+                    }
                     <HeaderItem content={status == "unauthenticated" ? "login" : "logout" } onClick={async () => {
                         if (status == "unauthenticated") {
                             await signIn()