init

app/components/ArticleBlock.tsx

@@ -0,0 +1,60 @@
+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";
+
+interface ArticleLink {
+  title: string;
+  date?: string;
+  href: string;
+}
+
+const ArticleBlock = async ({
+  title,
+  width,
+  height,
+  category,
+  linkPrefix,
+}: {
+  title: string;
+  height?: number | string;
+  width?: number | string;
+  category: string;
+  linkPrefix: string;
+}) => {
+  const data = await listArticles({ cid: category });
+  return (
+    <div
+      style={{
+        width,
+        height,
+      }}
+      className={"flex flex-col"}
+    >
+      <div
+        className={`title-bar flex items-center px-2 ${styles.articleBlockTitleBar}`}
+      >
+        <Image width={30} height={30} src={trumpetIcon} alt={"trumpet icon"} />
+        <span className={"ml-2 text-[14px]"}>{title}</span>
+      </div>
+      <div className={`${styles.articlesList} bg-[#e1f1fd] flex-1`}>
+        <ul>
+          {data.lists.map((article) => (
+            <li className={"h-7 px-1 flex items-center"} key={article.id}>
+              <Link
+                className={"w-full truncate text-xs"}
+                href={`${linkPrefix}/${article.id}`}
+              >
+                {article.title}
+              </Link>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </div>
+  );
+};
+
+export default ArticleBlock;