75 lines
1.9 KiB
TypeScript
75 lines
1.9 KiB
TypeScript
import Image from "next/image";
|
|
import trumpetIcon from "@/app/assets/trumpet-icon.png";
|
|
import styles from "@/app/assets/page.module.css";
|
|
import Link from "next/link";
|
|
import request from "@/app/lib/request";
|
|
import { listArticles } from "@/app/api/articles";
|
|
import dayjs from "dayjs";
|
|
|
|
interface ArticleLink {
|
|
title: string;
|
|
date?: string;
|
|
href: string;
|
|
}
|
|
|
|
const ArticleBlock = async ({
|
|
title,
|
|
width,
|
|
height,
|
|
category,
|
|
linkPrefix,
|
|
showDate,
|
|
}: {
|
|
title: string;
|
|
height?: number | string;
|
|
width?: number | string;
|
|
category: string;
|
|
linkPrefix: string;
|
|
showDate?: boolean;
|
|
}) => {
|
|
const data = await listArticles({ cid: category });
|
|
return (
|
|
<div
|
|
style={{
|
|
width,
|
|
height,
|
|
}}
|
|
className={"flex flex-col overflow-hidden"}
|
|
>
|
|
<div
|
|
className={`title-bar text-white flex items-center px-2 font-bold ${styles.articleBlockTitleBar} relative`}
|
|
>
|
|
<Image width={30} height={30} src={trumpetIcon} alt={"trumpet icon"} />
|
|
<span className={"ml-2 text-[14px]"}>{title}</span>
|
|
<Link
|
|
className={"absolute right-3 text-white text-xs"}
|
|
href={`${linkPrefix}/pages/1`}
|
|
>
|
|
更多+
|
|
</Link>
|
|
</div>
|
|
<div className={`${styles.articlesList} bg-[#e1f1fd] flex-1`}>
|
|
<ul>
|
|
{data.lists?.map((article) => (
|
|
<li className={"h-8"} key={article.id}>
|
|
<Link
|
|
className={
|
|
"w-full px-1 h-full flex items-center text-xs justify-between"
|
|
}
|
|
href={`${linkPrefix}/${article.id}`}
|
|
>
|
|
<span className={"flex-1 truncate"}>{article.title}</span>
|
|
{showDate && (
|
|
<span>{dayjs(article.createTime).format("YYYY-MM-DD")}</span>
|
|
)}
|
|
</Link>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ArticleBlock;
|