update

app/_components/ArticleBlock.tsx

@@ -0,0 +1,74 @@
+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/_services/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 flex items-center px-2 font-bold text-white ${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-xs text-white"}
+          href={`${linkPrefix}/pages/1`}
+        >
+          更多+
+        </Link>
+      </div>
+      <div className={`${styles.articlesList} flex-1 bg-[#e1f1fd]`}>
+        <ul>
+          {data.lists?.map((article) => (
+            <li className={"h-8"} key={article.id}>
+              <Link
+                className={
+                  "flex h-full w-full items-center justify-between px-1 text-xs"
+                }
+                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;