import useGetLatestEssay from "@/app/[language]/query/useGetLatestEssay"; import EssayTitleView from "@/components/EssayTitleView"; 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 LatestEssaysView() { const t = useTranslations(); const { data: latestEssay, isFetched: isLatestEssayLoaded } = useGetLatestEssay(); return ( <ListGroup> <ListGroupItem>{t("latestEssaysView")}</ListGroupItem> {isLatestEssayLoaded ? latestEssay.map((latestEssay) => ( <ListGroupItem key={latestEssay.essayID}> <EssayTitleView forumID={latestEssay.forumID} forumTitle={latestEssay.forumTitle} essay={latestEssay} /> </ListGroupItem> )) : [...Array(5).keys()].map((i) => ( <ListGroupItem key={i}> <EssayTitleView key={i} essay={{ essayID: -1, title: "Loading...", avatarID: "", avatarName: "", date: getDatetime(), commentCount: 0, hitCount: 0, }} /> </ListGroupItem> ))} </ListGroup> ); }