import WwwLevelView, { WwwLevelViewLoading, } from "@/app/[language]/avatar/components/WwwLevelView"; import { GetAvatar } from "@/app/[language]/avatar/query/useGetAvatar"; import useGetAvatarWwwLevels from "@/app/[language]/avatar/query/useGetAvatarWwwLevels"; import { useAvatarStore } from "@/state/Stores"; import { observer } from "mobx-react-lite"; import ListGroup from "react-bootstrap/ListGroup"; import ListGroupItem from "react-bootstrap/ListGroupItem"; export default observer(({ avatar: { avatarID } }: { avatar: GetAvatar }) => { const { tabItem } = useAvatarStore(); const { isFetched: isWwwLevelsLoaded, data: wwwLevels } = useGetAvatarWwwLevels(tabItem === "wwwLevels" ? avatarID : undefined); return ( <ListGroup> {isWwwLevelsLoaded ? ( wwwLevels.map((wwwLevel) => ( <ListGroupItem key={wwwLevel.levelID}> <WwwLevelView {...wwwLevel} /> </ListGroupItem> )) ) : ( <ListGroupItem> <WwwLevelViewLoading /> </ListGroupItem> )} </ListGroup> ); });