refactor of the admin panel page

src/app/admin/[[...slug]]/page.tsx

@@ -4,25 +4,24 @@ import AuthHandler from "@/components/server/admin/authHandler";
 import Sidebar, { SidebarEntry } from "@/components/server/admin/views/sidebar";
 import { ProjectView } from "@/components/views/admin/project";
 import { PostView } from "@/components/views/admin/post";
-import { redirect } from 'next/navigation'
+import { redirect } from "next/navigation";
 import { ReactNode } from "react";
-
-function Home() {
-	return <div>home</div>;
-}
-function PostManager() {
-	return <PostView></PostView>;
-}
-function ProjectManager() {
-	return <ProjectView></ProjectView>;
-}
+import {
+	IOptionalChildrenProps,
+	ISlugArrayProps,
+} from "@/components/shared/props";
 
 const viewMapRecords: Record<string, ReactNode> = {
-	"home": <Home key={0}/>,
-	"man-post": <PostManager key={1}/>,
-	"man-proj": <ProjectManager key={2}/>
-}
+	home: <div>home</div>,
+	"man-post": <PostView />,
+	"man-proj": <ProjectView />,
+};
 
+interface AdminPageProps extends ISlugArrayProps, IOptionalChildrenProps {}
+
+export default async function Page({
+	params: { slug = ["home"] },
+}: AdminPageProps) {
 	const sidebarEntries: SidebarEntry[] = [
 		{ label: "Home", view: "home" },
 		{ label: "Post Management", view: "man-post" },
@@ -30,33 +29,17 @@ const sidebarEntries: SidebarEntry[] = [
 		{ label: "Tag Management", view: "man-tags" },
 		{ label: "User Management", view: "man-user" },
 	];
-
-function getCurrentView(view: string): ReactNode {
-	const viewJSX = viewMapRecords[view || "home"];
-	return viewJSX;
-}
-
-type Props = {
-	params: {
-		slug: string[];
-	};
-};
-
-export default async function Page({ params: { slug = ["home"] } }: Props) {
-	if (
-		(await sidebarEntries)
-			.map((entry) => entry.view)
-			.indexOf(slug.toString()) < 0
-	) redirect("/admin/")
+	if (sidebarEntries.map((entry) => entry.view).indexOf(slug.toString()) < 0)
+		redirect("/admin/");
 	return (
 		<main className="h-screen w-screen flex flex-col p-0 bg-gray-300 box-border m-0">
 			<AuthHandler params={null}>
 				<Sidebar
 					sidebarEntries={sidebarEntries}
-					slug={slug.toString()}
-				></Sidebar>
+					params={{ slug: slug.toString() }}
+				/>
 				<div className="AdminPanelWrapper flex flex-col p-2">
-					{getCurrentView(slug.toString())}
+					{viewMapRecords[slug.toString() || "home"]}
 				</div>
 			</AuthHandler>
 			{/* <section>{JSON.stringify(cookies().getAll())}</section> */}

src/components/server/admin/views/sidebar.tsx

@@ -1,36 +1,42 @@
-import './sidebar.css'
-import React, { ReactNode } from 'react';
-import Link from 'next/link';
-
+import "./sidebar.css";
+import React, { ReactNode } from "react";
+import Link from "next/link";
+import { IOptionalChildrenProps, ISlugProps } from "@/components/shared/props";
 
 export type SidebarEntry = {
 	label: string;
 	view: string;
-  }
+};
 
-type Props = {
-    children?:ReactNode;
+interface Props extends ISlugProps {
 	sidebarEntries: Array<SidebarEntry>;
-    slug:string
 }
 
-
-
-export default async function Sidebar({children, sidebarEntries, slug}:Props){
-    
+export default async function Sidebar({
+	sidebarEntries,
+	params: { slug },
+}: Props) {
 	return (
-        <div className='w-fit h[100%] drop-shadow-2xl shadow-xl'>
-            <ul className={`navbar-light bg-light nav nav-pills flex-column mb-auto container-fluid h-[100%] items-start justify-start p-0 w-fit`}>
+		<div className="w-fit h[100%] drop-shadow-2xl shadow-xl">
+			<ul
+				className={`navbar-light bg-light nav nav-pills flex-column mb-auto container-fluid h-[100%] items-start justify-start p-0 w-fit`}
+			>
 				{sidebarEntries.map((sidebarEntry) => {
-                    const activeClass:string = (slug == sidebarEntry.view) ? 'active' : '';
-                    return <li 
+					const activeClass: string =
+						slug == sidebarEntry.view ? "active" : "";
+					return (
+						<li
 							key={sidebarEntry.view}
-                    className='nav-item w-[100%]'>
+							className="nav-item w-[100%]"
+						>
 							<Link
 								href={`/admin/${sidebarEntry.view}`}
-                            className={`${activeClass} nav-link m-2 whitespace-nowrap outline outline-1`}>
+								className={`${activeClass} nav-link m-2 whitespace-nowrap outline outline-1`}
+							>
 								{sidebarEntry.label}
-                        </Link></li>
+							</Link>
+						</li>
+					);
 				})}
 			</ul>
 		</div>

src/components/shared/props/ChildrenProps.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from "react";
+
+export interface IChildrenProps{
+    children: ReactNode;
+}
+export interface IOptionalChildrenProps{
+    children?: ReactNode;
+}

src/components/shared/props/SlugProps.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from "react";
+
+export interface ISlugProps{
+    params: {
+        slug: string
+    };
+}
+export interface ISlugArrayProps{
+    params: {
+        slug: string[]
+    };
+}

src/components/shared/props/index.ts

@@ -0,0 +1,2 @@
+export * from "./ChildrenProps";
+export * from "./SlugProps";