caszl-next/app/components/LatestNews.tsx

import { articleDetail, listArticles } from "@/app/api/articles";
import Link from "next/link";
import Image from "next/image";
import { htmlToText } from "html-to-text";

const LatestNews = async () => {
  const { lists } = await listArticles({
    pageNo: 1,
    cid: "4",
    pageSize: 1,
    sort: "new",
  });
  if (!lists?.length) {
    return <></>;
  }
  const { id } = lists[0];
  const article = await articleDetail({
    id: `${id}`,
  });

  const content = htmlToText(article.content, {
    selectors: [{ selector: "img", format: "skip" }],
  });

  return (
    <div className={"h-[180px] bg-white p-2 flex"}>
      <Link
        href={`general-news/${lists[0].id}`}
        className={"article-cover w-[207px]"}
      >
        <img
          className={"w-full h-full object-cover"}
          src={`${process.env.NEXT_PUBLIC_ADMIN_BASE_URL}/uploads/${article.image}`}
          alt={""}
        />
      </Link>
      <div className={"w-0 flex-1 ml-1 relative"}>
        <Link
          href={`general-news/${lists[0].id}`}
          className={"title block truncate text-[#186ab6] text-base"}
        >
          {article.title}
        </Link>
        <Link
          href={`general-news/${lists[0].id}`}
          className={"content text-xs line-clamp-4 leading-7"}
        >
          {content}
        </Link>
        <Link
          href={"/general-news/pages/1"}
          className={"text-xs text-[#ffc001] absolute left-0 bottom-0"}
        >
          更多新闻内容＞＞
        </Link>
      </div>
    </div>
  );
};

export default LatestNews;