import AvatarTitle from "@/components/AvatarTitle"; import { EssayAPIEssay } from "@/type/wwwAPI"; import { useTranslations } from "next-intl"; import { Col, ListGroupItem, Row } from "reactstrap"; import { getDatetime } from "taehui-ts/date"; import { useTo } from "taehui-ts/fe-utilities"; export default function EssayTitleView({ forumID, forumTitle, essay: { essayID, title, avatarID, avatarName, date, commentCount, hitCount }, }: { forumID?: string; forumTitle?: string; essay: EssayAPIEssay; }) { const t = useTranslations(); const to = useTo(); const isLoading = !!(forumID && essayID); return ( <ListGroupItem className={isLoading ? "route" : ""} onClick={ isLoading ? () => { to(`/forum/${forumID}/${essayID}`); } : undefined } > <Row className="g-0"> <AvatarTitle avatarID={avatarID} avatarName={avatarName}> <span> {forumTitle && `[${forumTitle}]`} {title} [{commentCount}] </span> </AvatarTitle> <Col className="m-1 text-end" xs="auto"> <span>{getDatetime(date)}</span> <br /> <span>{t("hitCount", { hitCount })}</span> </Col> </Row> </ListGroupItem> ); }