Updated links logic, new admin dash

src/pages/reviews/[name].tsx

@@ -1,35 +1,56 @@
-import {useRouter} from 'next/router';
-import Header from '@/components/header';
-import Footer from "@/components/footer";
-import Image from 'next/image';
-import {api} from '@/utils/api'
+import RootLayout from '@/components/RootLayout';
+
+// next modules
+import Router, {useRouter} from 'next/router';
 import Link from 'next/link';
+import {useSession} from 'next-auth/react';
+import Image from 'next/image';
+
+// api
+import {api} from '@/utils/api'
+
+// icons
+import { Trash } from 'grommet-icons';
 
 export default function ReviewPage() {
     const router = useRouter()
     const name = router.query.name as string
+    const { status } = useSession()
+
+    // trpc stuff
     const {data: bookData} = api.post.getOne.useQuery(name)
+    const deletionMutation = api.post.delete.useMutation()
+
+    function deleteItem() {
+        if (bookData) {
+            deletionMutation.mutate(bookData.id)
+            Router.replace("/").catch(() => {
+                console.error("Failed to reroute user!")
+            })
+        }
+    }
 
     if (bookData) {
         return (
-            <main className="min-h-screen bg-black text-white">
-                <Header />
-                <div className="mx-auto w-1/2 text-center flex justify-center text-white">
+            <RootLayout>
+                <div className="mx-auto w-1/2 text-center flex justify-center">
                     <Image src={bookData.image} width="150" height="150" alt={`${bookData.name} ${bookData.type} cover`} />
                 </div>
 
-                <div className="mx-auto w-1/2 text-center">
-                    <h1 className="text-2xl font-bold">{bookData.name}</h1>
-                    <hr />
+                <div className="mx-auto w-1/2 text-center text-white">
+                    <h1 className="text-2xl font-bold">{bookData.name} { status == "authenticated" ? <Trash onClick={deleteItem} className="hover:cursor-pointer" /> : ""}</h1>
+                    
+                    <div className="pt-2 pb-2">
+                        <hr />
+                    </div>
+
                     {bookData.reviewContents}
                 </div>
-                <Footer />
-            </main>
+            </RootLayout>
         )
     } else {
         return (
-            <main className="min-h-screen bg-black text-white flex flex-col justify-center items-centers">
-                <Header />
+            <RootLayout>
                 <div className="text-center text-2xl font-bold">
                     <p>Well, that&apos;s not good..</p>
                 </div>
@@ -40,8 +61,7 @@ export default function ReviewPage() {
                         Head Home
                     </Link>
                 </div>
-                <Footer />
-            </main>
+            </RootLayout>
         )
     }
 }