import LatestAvatarView from "@/app/[language]/components/LatestAvatarView"; import useGetLatestLoggedInAvatar from "@/app/[language]/query/useGetLatestLoggedInAvatar"; import { useTranslations } from "next-intl"; import ListGroup from "react-bootstrap/ListGroup"; import ListGroupItem from "react-bootstrap/ListGroupItem"; import { getDatetime } from "taehui-lib/date"; export default function LatestLoggedInAvatarsView() { const t = useTranslations(); const { data: latestLoggedInAvatar, isFetched: isLatestLoggedInAvatarLoaded, } = useGetLatestLoggedInAvatar(); return ( <ListGroup> <ListGroupItem>{t("latestLoggedInAvatarsView")}</ListGroupItem> {isLatestLoggedInAvatarLoaded ? latestLoggedInAvatar.map(({ avatarID, avatarName, date }) => ( <ListGroupItem key={avatarID}> <LatestAvatarView avatarID={avatarID} avatarName={avatarName} date={date} /> </ListGroupItem> )) : [...Array(5).keys()].map((i) => ( <ListGroupItem key={i}> <LatestAvatarView avatarID="" avatarName="Loading..." date={getDatetime()} /> </ListGroupItem> ))} </ListGroup> ); }