Update skeletons

src/ui/gameClass/GameClassListSkeleton.tsx

@@ -1,7 +1,72 @@
+import { ButtonShape, ButtonSizeType, ButtonVariant } from "@/components/button/Button";
+import Table from "@/components/table/Table";
+import { elementBg } from "@/util/SkeletonUtil";
+import GameClassAdminButtons from "./GameClassAdminButtons";
+
+
 export default function GameClassListSkeleton(){
-	return (
+	const headElements: React.ReactNode[] = [
 		<div>
-			Game Class List Skeleton
+			Icon
+		</div>,
+		<div>
+			Name
+		</div>,
+		<div
+			className="pl-16"
+		>
+			Actions
 		</div>
+	];
+	const bodyElements: React.ReactNode[][] = [
+		GameClassSkeleton(),
+		GameClassSkeleton(),
+		GameClassSkeleton(),
+		GameClassSkeleton(),
+		GameClassSkeleton(),
+		GameClassSkeleton(),
+		GameClassSkeleton(),
+		GameClassSkeleton(),
+		GameClassSkeleton(),
+		GameClassSkeleton()
+	];
+
+
+	return (
+		<Table
+			tableHeadElements={headElements}
+			tableBodyElements={bodyElements}
+		/>
 	);
 }
+
+
+function GameClassSkeleton(): React.ReactNode[]{
+	const buttonsProps = {
+		buttonProps: {
+			variant: "ghost" as ButtonVariant,
+			size: "md" as ButtonSizeType,
+			shape: "square" as ButtonShape,
+			disabled: true
+		},
+		showEditGameClassModal: () => {},
+		showDeleteGameClassModal: () => {}
+	}
+
+	const elements: React.ReactNode[] = [
+		<div
+			className={`h-8 w-8 -my-1 mr-4 ${elementBg}`}
+		/>,
+		<div
+			className={`h-6 w-full ${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>
+			<GameClassAdminButtons {...buttonsProps}/>
+		</div>
+	];
+
+	return elements;
+}