import AvatarDrawing from "@/components/AvatarDrawing"; import { EssayAPIEssay } from "@/type/wwwAPI"; import { useTranslations } from "next-intl"; import Link from "next/link"; import Col from "react-bootstrap/Col"; import Row from "react-bootstrap/Row"; import Stack from "react-bootstrap/Stack"; import { getDatetime } from "taehui-ts/date"; export default function EssayTitleView({ forumID, forumTitle, essay: { essayID, title, avatarID, avatarName, date, commentCount, hitCount }, }: { forumID?: string; forumTitle?: string; essay: EssayAPIEssay; }) { const t = useTranslations(); const isLoading = !(typeof forumID === "string" && essayID >= 0); return ( <Row className="flex-nowrap" {...(!isLoading && { as: Link, href: `/forum/${forumID}/${essayID}`, })} > <Col xs="auto"> <AvatarDrawing avatarID={avatarID} /> </Col> <Col className="cc"> <Stack gap={2}> <span className="ellipsis">{avatarName}</span> <span className="ellipsis"> {forumTitle && `[${forumTitle}]`} {title} [{commentCount}] </span> </Stack> </Col> <Col xs="auto"> <Stack gap={2} className="text-end"> <span>{getDatetime(date)}</span> <span>{t("hitCount", { hitCount })}</span> </Stack> </Col> </Row> ); }