Class Groups tab working

src/components/gameClass/GameClassByClassGroupDisplay.tsx

@@ -0,0 +1,45 @@
+import { useGetGameClassesByClassGroup } from "@/hooks/GameClassHooks";
+import DangerMessage from "../message/DangerMessage";
+
+
+export default function GameClassByClassGroupDisplay({
+	classGroupId
+}:{
+	classGroupId: string;
+}){
+	const gameClassesQuery = useGetGameClassesByClassGroup(classGroupId);
+	const displayId = crypto.randomUUID().replaceAll("-", "");
+
+
+	if(gameClassesQuery.status === "pending"){
+		return (<div>Loading...</div>);
+	}
+	else if(gameClassesQuery.status === "error"){
+		return (<DangerMessage>Error: {gameClassesQuery.error.message}</DangerMessage>);
+	}
+	else{
+		return (
+			<div
+				className="flex flex-row flex-wrap items-center justify-center gap-x-4"
+			>
+				{
+					gameClassesQuery.data.map((gameClass) => (
+						<div
+							key={`gameClassByClassGroupDisplay${classGroupId}${gameClass.gameClassId}${displayId}`}
+							className="flex flex-row items-center justify-center"
+						>
+							{
+								gameClass.gameClassIcon &&
+								<img
+									className="max-h-6 max-w-6 mr-2"
+									src={`${import.meta.env.VITE_ICON_URL}/gameClass/${gameClass.gameClassIcon}`}
+								/>
+							}
+							{gameClass.gameClassName}
+						</div>
+					))
+				}
+			</div>
+		);
+	}
+}