Fix person list skeleton

src/ui/person/PersonListSkeleton.tsx

@@ -1,7 +1,78 @@
+import { ButtonShape, ButtonSizeType, ButtonVariant } from "@/components/button/Button";
+import Table from "@/components/table/Table";
+import { elementBg } from "@/util/SkeletonUtil";
+import React from "react";
+import PersonAdminButtons from "./PersonAdminButtons";
+
 export default function PersonListSkeleton(){
-	return (
+	const headElements: React.ReactNode[] = [
 		<div>
-			Person List Skeleton
+			Person Name
+		</div>,
+		<div>
+			Discord ID
+		</div>,
+		<div>
+			Characters
+		</div>,
+		<div
+			className="pl-16"
+		>
+			Actions
 		</div>
+	];
+
+	const bodyElements: React.ReactNode[][] = [
+		PersonSkeleton(),
+		PersonSkeleton(),
+		PersonSkeleton(),
+		PersonSkeleton(),
+		PersonSkeleton(),
+		PersonSkeleton(),
+		PersonSkeleton(),
+		PersonSkeleton(),
+		PersonSkeleton(),
+		PersonSkeleton()
+	];
+
+
+	return (
+		<Table
+			tableHeadElements={headElements}
+			tableBodyElements={bodyElements}
+		/>
 	);
 }
+
+export function PersonSkeleton(): React.ReactNode[]{
+	const buttonsProps = {
+		buttonProps: {
+			variant: "ghost" as ButtonVariant,
+			size: "md" as ButtonSizeType,
+			shape: "square" as ButtonShape,
+			disabled: true
+		},
+		showUpdatePersonModal: () => {},
+		showDeletePersonModal: () => {},
+		showCreatePersonCharacterModal: () => {}
+	}
+	const elements: React.ReactNode[] = [
+		<div
+			className={`h-6 w-64 mr-1 ${elementBg}`}
+		/>,
+		<div
+			className={`h-6 w-48 ml-2 ${elementBg}`}
+		/>,
+		<div
+			className={`h-6 w-[48rem] ${elementBg}`}
+		/>,
+		<div
+			className={`flex flex-row items-center justify-center gap-2 pl-16`}
+		>
+			<div className="py-4 border-l border-neutral-500">&nbsp;</div>
+			<PersonAdminButtons {...buttonsProps}/>
+		</div>
+	];
+
+	return elements;
+}