jiang13-bbs/frontend/components/home/CommunityPanels.tsx

import Link from "next/link";
import { Flame, Users, MessageCircle, Heart } from "lucide-react";
import type { PostListItem, ActiveUser } from "@/lib/api";
import Avatar from "@/components/Avatar";

/* ---------- 热门榜 ---------- */

function HotRanking({ posts }: { posts: PostListItem[] }) {
  return (
    <section className="j13-module" aria-label="热门讨论">
      <p className="j13-module-title mb-1.5">
        <Flame size={15} style={{ color: "var(--clay)" }} /> 热门讨论
      </p>
      {posts.length === 0 ? (
        <p className="meta px-1.5 py-3">还没有热门讨论</p>
      ) : (
        <ol className="j13-ranklist">
          {posts.map((p, i) => (
            <li key={p.id}>
              <Link href={`/post/${p.id}`} className="j13-rank" title={p.title}>
                <span className="j13-rank-no">{i + 1}</span>
                <span className="min-w-0 flex-1">
                  <span
                    className="block text-[13.5px] font-semibold leading-snug line-clamp-2"
                    style={{ color: "var(--ink)" }}
                  >
                    {p.title}
                  </span>
                  <span className="mt-1 flex items-center gap-2.5 meta text-[11.5px]">
                    <span className="inline-flex items-center gap-1">
                      <MessageCircle size={11.5} /> {p.comment_count}
                    </span>
                    <span className="inline-flex items-center gap-1">
                      <Heart size={11.5} /> {p.like_count}
                    </span>
                    <span className="truncate">{p.board.name}</span>
                  </span>
                </span>
              </Link>
            </li>
          ))}
        </ol>
      )}
    </section>
  );
}

/* ---------- 活跃用户 ---------- */

function ActiveUsers({ users }: { users: ActiveUser[] }) {
  return (
    <section className="j13-module" aria-label="活跃成员">
      <p className="j13-module-title mb-3">
        <Users size={15} style={{ color: "var(--accent)" }} /> 活跃成员
      </p>
      {users.length === 0 ? (
        <p className="meta px-1.5 py-2">近 14 天还没有人互动</p>
      ) : (
        <ul className="space-y-1">
          {users.map((u) => (
            <li key={u.id}>
              <Link href={`/u/${u.id}`} className="j13-raillink">
                <Avatar name={u.nickname || u.username} src={u.avatar} size={28} />
                <span className="flex-1 truncate text-[13.5px]">{u.nickname || u.username}</span>
                <span className="meta text-[11.5px]">{u.activity_count} 次</span>
              </Link>
            </li>
          ))}
        </ul>
      )}
      <p className="meta mt-3 px-1 text-[11px]">按近 14 天发帖与评论计数</p>
    </section>
  );
}

/* ---------- 桌面 / 移动两种装配 ---------- */

export function CommunityPanels({
  hot,
  activeUsers,
}: {
  hot: PostListItem[];
  activeUsers: ActiveUser[];
}) {
  return (
    <aside className="hidden lg:block w-[280px] xl:w-[300px] shrink-0" aria-label="社区面板">
      <div className="sticky top-24 space-y-4">
        <HotRanking posts={hot} />
        <ActiveUsers users={activeUsers} />
      </div>
    </aside>
  );
}

export function CommunityPanelsMobile({
  hot,
  activeUsers,
}: {
  hot: PostListItem[];
  activeUsers: ActiveUser[];
}) {
  return (
    <div className="lg:hidden space-y-4" aria-label="社区面板">
      <HotRanking posts={hot} />
      <ActiveUsers users={activeUsers} />
    </div>
  );
}