"use client"; import AvatarsView from "@/app/[language]/hall/components/AvatarsView"; import useGetAbility5KHall from "@/app/[language]/hall/query/useGetAbility5KHall"; import useGetAbility7KHall from "@/app/[language]/hall/query/useGetAbility7KHall"; import useGetAbility9KHall from "@/app/[language]/hall/query/useGetAbility9KHall"; import useGetAtBandHall from "@/app/[language]/hall/query/useGetAtBandHall"; import useGetAtStandHall from "@/app/[language]/hall/query/useGetAtStandHall"; import useGetAtTopHall from "@/app/[language]/hall/query/useGetAtTopHall"; import useGetAtTotalHall from "@/app/[language]/hall/query/useGetAtTotalHall"; import useGetLevelHall from "@/app/[language]/hall/query/useGetLevelHall"; import useGetTotalBandHall from "@/app/[language]/hall/query/useGetTotalBandHall"; import useGetTotalStandHall from "@/app/[language]/hall/query/useGetTotalStandHall"; import useGetTotalTopHall from "@/app/[language]/hall/query/useGetTotalTopHall"; import useGetTotalTotalHall from "@/app/[language]/hall/query/useGetTotalTotalHall"; import { useHallStore } from "@/state/Stores"; import { wwwAPIPath } from "@/utilities/wwwAPI"; import { observer } from "mobx-react-lite"; import { useTranslations } from "next-intl"; import Image from "next/image"; import Tab from "react-bootstrap/Tab"; import Tabs from "react-bootstrap/Tabs"; export default observer(() => { const { tabItem, totalTabItem, atTabItem, abilityTabItem, setTabItem, setTotalTabItem, setAtTabItem, setAbilityTabItem, } = useHallStore(); const t = useTranslations(); const { data: totalTotalHall, isFetched: isTotalTotalHallLoaded } = useGetTotalTotalHall(); const { data: totalTopHall, isFetched: isTotalTopHallLoaded } = useGetTotalTopHall(); const { data: totalStandHall, isFetched: isTotalStandHallLoaded } = useGetTotalStandHall(); const { data: totalBandHall, isFetched: isTotalBandHallLoaded } = useGetTotalBandHall(); const { data: atTotalHall, isFetched: isAtTotalHallLoaded } = useGetAtTotalHall(); const { data: atTopHall, isFetched: isAtTopHallLoaded } = useGetAtTopHall(); const { data: atStandHall, isFetched: isAtStandHallLoaded } = useGetAtStandHall(); const { data: atBandHall, isFetched: isAtBandHallLoaded } = useGetAtBandHall(); const { data: ability5KHall, isFetched: isAbility5KHallLoaded } = useGetAbility5KHall(); const { data: ability7KHall, isFetched: isAbility7KHallLoaded } = useGetAbility7KHall(); const { data: ability9KHall, isFetched: isAbility9KHallLoaded } = useGetAbility9KHall(); const { data: levelHall, isFetched: isLevelHallLoaded } = useGetLevelHall(); return ( <> <Tabs activeKey={tabItem} onSelect={(eventKey) => { if (eventKey) { setTabItem(eventKey); } }} > <Tab title={t("hallTotalTitle")} eventKey="total"> <Tabs activeKey={totalTabItem} onSelect={(eventKey) => { if (eventKey) { setTotalTabItem(eventKey); } }} > <Tab title={t("hallTotal")} eventKey="total"> <AvatarsView isLoaded={isTotalTotalHallLoaded} halls={totalTotalHall} /> </Tab> <Tab title={t("hallTop")} eventKey="top"> <AvatarsView isLoaded={isTotalTopHallLoaded} halls={totalTopHall} /> </Tab> <Tab title={t("hallStand")} eventKey="stand"> <AvatarsView isLoaded={isTotalStandHallLoaded} halls={totalStandHall} /> </Tab> <Tab title={t("hallBand")} eventKey="band"> <AvatarsView isLoaded={isTotalBandHallLoaded} halls={totalBandHall} /> </Tab> </Tabs> </Tab> <Tab title={t("hallAtTitle")} eventKey="at"> <Tabs activeKey={atTabItem} onSelect={(eventKey) => { if (eventKey) { setAtTabItem(eventKey); } }} > <Tab title={t("hallTotal")} eventKey="total"> <AvatarsView isLoaded={isAtTotalHallLoaded} halls={atTotalHall} /> </Tab> <Tab title={t("hallTop")} eventKey="top"> <AvatarsView isLoaded={isAtTopHallLoaded} halls={atTopHall} /> </Tab> <Tab title={t("hallStand")} eventKey="stand"> <AvatarsView isLoaded={isAtStandHallLoaded} halls={atStandHall} /> </Tab> <Tab title={t("hallBand")} eventKey="band"> <AvatarsView isLoaded={isAtBandHallLoaded} halls={atBandHall} /> </Tab> </Tabs> </Tab> <Tab title={t("hallAbilityTitle")} eventKey="ability"> <Tabs activeKey={abilityTabItem} onSelect={(eventKey) => { if (eventKey) { setAbilityTabItem(eventKey); } }} > <Tab title="⑤K" eventKey="5K"> <AvatarsView isLoaded={isAbility5KHallLoaded} halls={ability5KHall} Component={({ value }) => ( <Image width={60} height={60} src={`${wwwAPIPath}/drawing?abilityClass5K=${value}`} alt="" /> )} /> </Tab> <Tab title="⑦K" eventKey="7K"> <AvatarsView isLoaded={isAbility7KHallLoaded} halls={ability7KHall} Component={({ value }) => ( <Image width={60} height={60} src={`${wwwAPIPath}/drawing?abilityClass7K=${value}`} alt="" /> )} /> </Tab> <Tab title="9K" eventKey="9K"> <AvatarsView isLoaded={isAbility9KHallLoaded} halls={ability9KHall} Component={({ value }) => ( <Image width={60} height={60} src={`${wwwAPIPath}/drawing?abilityClass9K=${value}`} alt="" /> )} /> </Tab> </Tabs> </Tab> <Tab title={t("hallLevelTitle")} eventKey="level"> <AvatarsView isLoaded={isLevelHallLoaded} halls={levelHall} /> </Tab> </Tabs> </> ); });