"use client"; import DateView from "@/app/[language]/etc/components/DateView"; import FavoritesView from "@/app/[language]/etc/components/FavoritesView"; import ModesView from "@/app/[language]/etc/components/ModesView"; import TotalEdgesView from "@/app/[language]/etc/components/TotalEdgesView"; import TotalNoteFilesView from "@/app/[language]/etc/components/TotalNoteFilesView"; import TotalTitlesView from "@/app/[language]/etc/components/TotalTitlesView"; import Loading from "@/app/[language]/etc/loading"; import useGetEtc from "@/app/[language]/etc/query/useGetEtc"; import { is, m0s, m12s, m1s, m2s, m3s, m4s, m5s, m6s, m7s, m8s, } from "@/utilities/Utility"; import { useTranslations } from "next-intl"; import Col from "react-bootstrap/Col"; import Row from "react-bootstrap/Row"; export default function Page() { const t = useTranslations(); const { data: { totalDateSet, totalDateValues, enrollDateSet, enrollDateValues, avatarDateSet, avatarDateValues, totalNoteFiles, totalTitles, totalEdges, favorites, favoritesAt, inputModes, autoModes, noteSaltModes, faintNoteModes, judgmentModes, hitPointsModes, noteMobilityModes, longNoteModes, inputFavorModes, noteModifyModes, lowestJudgmentConditionModes, }, isFetched: isEtcLoaded, } = useGetEtc(); if (!isEtcLoaded) { return <Loading />; } return ( <> <Row className="g-4"> <Col xs="auto"> <DateView title={t("etcTotal")} dateSet={totalDateSet} dateValues={totalDateValues} /> </Col> <Col xs="auto"> <DateView title={t("etcEnroll")} dateSet={enrollDateSet} dateValues={enrollDateValues} /> </Col> <Col xs="auto"> <DateView title={t("etcAvatar")} dateSet={avatarDateSet} dateValues={avatarDateValues} /> </Col> <Col xs="auto"> <TotalNoteFilesView totalNoteFiles={totalNoteFiles} /> </Col> <Col xs="auto"> <TotalTitlesView totalTitles={totalTitles} /> </Col> <Col xs="auto"> <TotalEdgesView totalEdges={totalEdges} /> </Col> <Col xs="auto"> <FavoritesView title={t("etcFavorites")} favorites={favorites} /> </Col> <Col xs="auto"> <FavoritesView title={t("etcFavoritesAt")} favorites={favoritesAt} /> </Col> <Col xs="auto"> <ModesView title={t("etcInputMode")} modes={inputModes} drawings={is} /> </Col> <Col xs="auto"> <ModesView title={t("etcAutoMode")} modes={autoModes} drawings={m0s} /> </Col> <Col xs="auto"> <ModesView title={t("etcNoteSaltMode")} modes={noteSaltModes} drawings={m1s} /> </Col> <Col xs="auto"> <ModesView title={t("etcFaintNoteMode")} modes={faintNoteModes} drawings={m2s} /> </Col> <Col xs="auto"> <ModesView title={t("etcJudgmentMode")} modes={judgmentModes} drawings={m3s} /> </Col> <Col xs="auto"> <ModesView title={t("etcHitPointsMode")} modes={hitPointsModes} drawings={m4s} /> </Col> <Col xs="auto"> <ModesView title={t("etcNoteMobilityMode")} modes={noteMobilityModes} drawings={m5s} /> </Col> <Col xs="auto"> <ModesView title={t("etcLongNoteMode")} modes={longNoteModes} drawings={m6s} /> </Col> <Col xs="auto"> <ModesView title={t("etcInputFavorMode")} modes={inputFavorModes} drawings={m7s} /> </Col> <Col xs="auto"> <ModesView title={t("etcNoteModifyMode")} modes={noteModifyModes} drawings={m8s} /> </Col> <Col xs="auto"> <ModesView title={t("etcLowestJudgmentConditionMode")} modes={lowestJudgmentConditionModes} drawings={m12s} /> </Col> </Row> </> ); }