refactoring

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

@@ -15,58 +15,58 @@ type Props = {
 
 
 
-function Home(){
+function Home() {
   return <div>home</div>
 }
-function PostManager(){
+function PostManager() {
   return <div>posts</div>
 }
-function ProjectManager(){
+function ProjectManager() {
   return <div>projects</div>
 }
 
 
-async function getViewMap():Promise<Map<string, JSX.Element>>{
+async function getViewMap(): Promise<Map<string, JSX.Element>> {
   return new Map([
-  ['home', <Home></Home>],
+    ['home', <Home key={0}></Home>],
-  ['man-post', <PostView></PostView>],
+    ['man-post', <PostView key={1}></PostView>],
-  ['man-proj', <ProjectView></ProjectView>]
+    ['man-proj', <ProjectView key={2}></ProjectView>]
-]);
+  ]);
 }
 
 
 
 
-async function getSidebarEntries():Promise<Array<SidebarEntry>>{
+async function getSidebarEntries(): Promise<Array<SidebarEntry>> {
   return [
-    { label: 'Home', view: 'home'},
+    { label: 'Home', view: 'home' },
-    { label: 'Post Management', view: 'man-post'},
+    { label: 'Post Management', view: 'man-post' },
-    { label: 'Project Management', view: 'man-proj'},
+    { label: 'Project Management', view: 'man-proj' },
-    { label: 'Tag Management', view: 'man-tags'},
+    { label: 'Tag Management', view: 'man-tags' },
-    { label: 'User Management', view: 'man-user'},
+    { label: 'User Management', view: 'man-user' },
   ]
 }
 
-async function getCurrentView(view:string):Promise<JSX.Element>{
+async function getCurrentView(view: string): Promise<JSX.Element> {
   const viewMap = await getViewMap();
   const viewJSX = viewMap.get(view);
   return viewJSX ? viewJSX : <Home></Home>;
 }
 
-export default async function Page(props:Props){
+export default async function Page(props: Props) {
-  const sidebarEntries:Array<SidebarEntry> = await getSidebarEntries();
+  const sidebarEntries: Array<SidebarEntry> = await getSidebarEntries();
 
-  const slug:string|string[] = props.params.slug ? props.params.slug : 'home';
+  const slug: string | string[] = props.params.slug ? props.params.slug : 'home';
 
   return (
-          <main className="h-screen w-screen flex flex-col p-0 bg-gray-300 box-border m-0">
+    <main className="h-screen w-screen flex flex-col p-0 bg-gray-300 box-border m-0">
-              <AuthHandler params={null}>
+      <AuthHandler params={null}>
-                <Sidebar sidebarEntries={sidebarEntries} slug={slug.toString()}></Sidebar>
+        <Sidebar sidebarEntries={sidebarEntries} slug={slug.toString()}></Sidebar>
-                <div className="AdminPanelWrapper flex flex-col p-2">
+        <div className="AdminPanelWrapper flex flex-col p-2">
-                  {await getCurrentView(slug.toString())}
+          {await getCurrentView(slug.toString())}
-                </div>
+        </div>
-              </AuthHandler>
+      </AuthHandler>
-              {/* <section>{JSON.stringify(cookies().getAll())}</section> */}
+      {/* <section>{JSON.stringify(cookies().getAll())}</section> */}
-          </main>
+    </main>
   );
 }

src/components/client/TableGen.tsx

@@ -1,18 +1,26 @@
 'use client'
 import { ReactNode } from "react";
 
+type TableGenOptions = {
+    editButton:boolean;
+    deleteButton:boolean;
+}
+
 type Props = {
     headings:Array<string>;
     children:ReactNode;
+    options?:TableGenOptions
 }
 
 export default function TableGen(props:Props){
+    const options = props.options ?  props.options : {editButton: true, deleteButton: true}
+    console.log(props.headings)
     return <>
     <table className="table overflow-scroll">
         <thead>
             <tr>
-                {[...props.headings,'Edit', 'Delete'].map((h)=>
+                {[...props.headings,options.editButton ? 'Edit' : null, options.deleteButton ? 'Delete' : null].map((h)=>
-                <th key={h} scope="col">{h}</th>
+                h ? <th key={h} scope="col">{h}</th> : ''
                 )}
             </tr>
         </thead>