cleanup

src/app/@modal/default.tsx

@@ -0,0 +1,4 @@
+export default function Default() {
+  return null
+}
+

src/app/_components/AdminWrap.tsx

@@ -0,0 +1,9 @@
+import { isAdmin } from "../actions"
+
+export default async function AdminWrap({children,}: Readonly<{ children: React.ReactNode }>) {
+	if (await isAdmin()) {
+		return <>{children}</>
+	}
+	return (<></>) 
+}
+

src/app/_components/TopNav.tsx

@@ -0,0 +1,25 @@
+import Link from "next/link"
+import AdminWrap from "./AdminWrap"
+import { SignedIn, SignedOut, SignUpButton, UserButton } from "@clerk/nextjs"
+
+export default function TopNav() {
+	return (
+		<nav className="flex flex-wrap items-center w-full border-b px-5 py-5 gap-5 bg-black text-white border-white">
+			<Link className="h-fit" href={"/blog"}> Blog </Link>
+			<Link className="h-fit" href={"/cv"}> CV </Link>
+			<Link className="h-fit" href={"/projects"}> Projects </Link>
+			<Link className="h-fit" href={"/fun"}> Fun </Link>
+			<div className="ml-auto"/>
+			<AdminWrap><Link className="h-fit" href={"/admin"}> Admin </Link></AdminWrap>
+			<div className="h-fit flex">
+				<SignedIn>
+					<UserButton/>
+				</SignedIn>
+				<SignedOut>
+					<SignUpButton/>
+				</SignedOut>
+			</div>
+		</nav>
+	)
+}
+

src/app/actions.ts

@@ -0,0 +1,8 @@
+'use server'
+import { auth } from "@clerk/nextjs/server"
+import { env } from "~/env"
+
+export async function isAdmin() {
+		const userid = (await auth()).userId
+		return (userid == env.ADMIN_USER_CLERK_ID)
+}

src/app/admin/page.tsx

@@ -1,6 +1,6 @@
 import { SignedIn } from "@clerk/nextjs";
 
-const AdminPage = async () => {
+export default function AdminPage() {
   return (
     <SignedIn>
   		<main className="flex min-h-screen flex-col items-center justify-center bg-black text-white">
@@ -11,5 +11,3 @@ const AdminPage = async () => {
   	</SignedIn>
   )
 }
-
-export default AdminPage;

src/app/blog/layout.tsx

@@ -0,0 +1,10 @@
+'use client'
+export default function RootLayout({
+  children,
+}: Readonly<{ children: React.ReactNode}>) {
+  return (
+    <>
+      {children}
+    </>
+  )
+}

src/app/cv/layout.tsx

@@ -0,0 +1,10 @@
+'use client'
+export default function RootLayout({
+  children,
+}: Readonly<{ children: React.ReactNode}>) {
+  return (
+    <>
+      {children}
+    </>
+  )
+}

src/app/cv/page.tsx

@@ -0,0 +1,18 @@
+import { getCvCategories } from "~/server/db/query"
+
+export default async function CvPage() {
+  const cvCategories = await getCvCategories(); 
+  return (
+    <div>
+      {cvCategories.map((category) => {
+        return (
+          <div key={category.id}>
+            <div>
+              {category.name}
+            </div>
+          </div>
+        )
+      })}
+    </div>
+  )
+}

src/app/fun/layout.tsx

@@ -0,0 +1,10 @@
+'use client'
+export default function RootLayout({
+  children,
+}: Readonly<{ children: React.ReactNode}>) {
+  return (
+    <>
+      {children}
+    </>
+  )
+}

src/app/layout.tsx

@@ -1,11 +1,9 @@
 import "~/styles/globals.css";
-
-import Link from "next/link";
 import type { Metadata } from "next";
 import { Geist } from "next/font/google";
-import { ClerkProvider, SignedIn, SignedOut, SignUpButton, UserButton } from "@clerk/nextjs"; 
-import { auth } from "@clerk/nextjs/server";
-import { env } from "~/env";
+import { ClerkProvider } from "@clerk/nextjs";
+
+import TopNav from "./_components/TopNav";
 export const metadata: Metadata = {
 	title: "Gregor Lohaus",
 	description: "My Personal Website",
@@ -17,45 +15,18 @@ const geist = Geist({
 	variable: "--font-geist-sans",
 });
 
-const AdminWrap = async ({children,}: Readonly<{ children: React.ReactNode }>) => {
-	const userid = (await auth()).userId
-	const isAdmin = (userid == env.ADMIN_USER_CLERK_ID)
-	if (isAdmin) {
-		return <>{children}</>
-	}
-	return (<></>) 
-}
-
-const TopNav = async () => {
-	return (
-		<nav className="flex flex-wrap items-center w-full border-b px-5 py-5 gap-5 bg-black text-white border-white">
-			<Link className="h-fit" href={"/blog"}> Blog </Link>
-			<Link className="h-fit" href={"/cv"}> CV </Link>
-			<Link className="h-fit" href={"/projects"}> Projects </Link>
-			<Link className="h-fit" href={"/fun"}> Fun </Link>
-			<div className="ml-auto"/>
-			<AdminWrap><Link className="h-fit" href={"/admin"}> Admin </Link></AdminWrap>
-			<div className="h-fit flex">
-				<SignedIn>
-					<UserButton/>
-				</SignedIn>
-				<SignedOut>
-					<SignUpButton/>
-				</SignedOut>
-			</div>
-		</nav>
-	)
-}
 
 export default function RootLayout({
 	children,
-}: Readonly<{ children: React.ReactNode }>) {
+	modal
+}: Readonly<{ children: React.ReactNode, modal: React.ReactNode }>) {
 	return (
 		<ClerkProvider>
 			<html lang="en" className={`${geist.variable}`}>
 				<body className="flex flex-col gap-2 bg-black text-white">
 					<TopNav/>
 					{children}
+					{modal}
 				</body>
 			</html>
 		</ClerkProvider>

src/app/page.tsx

@@ -1,6 +1,4 @@
-export const dynamic = "force-dynamic"
-
-export default async function HomePage() {
+export default function HomePage() {
 	return (
 		<main className="flex min-h-screen flex-col items-center justify-center bg-black text-white">
 			<div>

src/app/projects/layout.tsx

@@ -0,0 +1,10 @@
+'use client'
+export default function RootLayout({
+  children,
+}: Readonly<{ children: React.ReactNode}>) {
+  return (
+    <>
+      {children}
+    </>
+  )
+}