caszl-next/app/_components/BranchLifeSketch.tsx

"use client";
import styles from "@/app/_assets/page.module.css";
import Image from "next/image";
import trumpetIcon from "@/app/_assets/trumpet-icon.png";
import { articleDetail, listArticles } from "@/app/_services/articles";
import { htmlToText } from "html-to-text";
import Link from "next/link";
import { useEffect, useRef, useState } from "react";
import { Article, ArticleDetail } from "@/app/_types/article";
import useSWR from "swr";
import { axiosClientInstance } from "@/app/_lib/request";
import { BaseResponse, PageData } from "@/app/_types/base";
import Swiper from "swiper";
import { Pagination, Autoplay } from "swiper/modules";

// import Swiper and modules styles
import "swiper/css";
import "swiper/css/pagination";
import "swiper/css/autoplay";

const BranchLifeSketch = () => {
  const { data } = useSWR("/article/list?cid=13", (key: string) =>
    axiosClientInstance.get<never, BaseResponse<PageData<Article>>>(key),
  );
  const swiperRef = useRef<HTMLDivElement>(null);
  useEffect(() => {
    let swiper: Swiper | null = null;
    if (swiperRef.current && data) {
      swiper = new Swiper(swiperRef.current, {
        modules: [Pagination, Autoplay],
        loop: true,
        slidesPerView: 2,
        direction: "vertical",
        mousewheel: true,
        autoplay: {
          delay: 1500,
          pauseOnMouseEnter: true,
        },
      });
    }
    return () => {
      swiper?.destroy();
      swiper = null;
    };
  }, [data]);
  return (
    <>
      <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]"}>分院生活剪影</span>
      </div>
      <div className={"h-[216px] bg-[#e1f1fd]"}>
        <div ref={swiperRef} className={"swiper h-full"}>
          <div className={"swiper-wrapper"}>
            {data?.data.lists?.map((article) => {
              return (
                <div key={article.id} className={"swiper-slide"}>
                  <ArticleItem article={article} />
                </div>
              );
            })}
          </div>
        </div>
      </div>
    </>
  );
};

const ArticleItem = ({ article }: { article: Article }) => {
  const { data } = useSWR(`/pc/articleDetail?id=${article.id}`, (key) =>
    axiosClientInstance.get<never, BaseResponse<ArticleDetail>>(key),
  );
  const cover_path = article.image?.match(/\/uploads\/.*/)?.[0];
  return (
    <div className={"flex h-[108px] w-full px-2 py-4"}>
      <Link
        className={"aspect-square"}
        href={`/branch-life-sketch/${article.id}`}
      >
        <img
          alt={""}
          className={"h-full w-full"}
          src={
            cover_path
              ? `${process.env.NEXT_PUBLIC_CLIENT_BASE_URL}${cover_path}`
              : undefined
          }
        />
      </Link>

      <div className={"ml-1 w-0 flex-1"}>
        <Link
          href={`/branch-life-sketch/${article.id}`}
          className={"truncate text-xs text-[#144673]"}
        >
          {article.title}
        </Link>

        <div className={"mt-3 line-clamp-4 text-xs text-[#797979]"}>
          {data?.data.content &&
            htmlToText(data.data.content, {
              selectors: [
                {
                  selector: "img",
                  format: "skip",
                },
              ],
            })}
        </div>
      </div>
    </div>
  );
};

export default BranchLifeSketch;