import WwwLevelItem from "@/app/[language]/avatar/components/WwwLevelItem"; import { GetAvatar } from "@/app/[language]/avatar/query/useGetAvatar"; import useGetAvatarWwwLevels from "@/app/[language]/avatar/query/useGetAvatarWwwLevels"; import { WwwLevelLoading } from "@/components/Loading"; import { useAvatarStore } from "@/store/Stores"; import { observer } from "mobx-react-lite"; import { ListGroup } from "reactstrap"; export default observer(({ avatar: { avatarID } }: { avatar: GetAvatar }) => { const { tabPosition } = useAvatarStore(); const { isFetched: isAvatarWwwLevelsLoaded, data: avatarWwwLevels } = useGetAvatarWwwLevels(tabPosition === 3 ? avatarID : undefined); return ( <ListGroup> {isAvatarWwwLevelsLoaded ? ( avatarWwwLevels.map(({ levelID, title, levelText, level, date }) => ( <WwwLevelItem key={levelID} levelID={levelID} title={title} levelText={levelText} level={level} date={date} /> )) ) : ( <WwwLevelLoading loadingCount={1} /> )} </ListGroup> ); });