46 lines
1.2 KiB
TypeScript
46 lines
1.2 KiB
TypeScript
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>
|
|
);
|
|
}
|
|
}
|