jiang13-bbs/frontend/components/site-doc/SiteDocAnnoNav.tsx

import Link from "next/link";
import { Megaphone, Pin } from "lucide-react";
import type { AnnouncementSummary } from "@/lib/api";
import { formatShortDate } from "@/lib/format";

/** 近期公告目录（高亮当前 id） */
export default function SiteDocAnnoNav({
  items,
  currentId,
  showAllLink = true,
}: {
  items: AnnouncementSummary[];
  currentId?: number;
  showAllLink?: boolean;
}) {
  return (
    <section className="j13-module flex min-h-0 flex-col" aria-label="近期公告">
      <div className="flex items-center justify-between gap-2 shrink-0">
        <p className="j13-module-title !mb-0">
          <Megaphone size={15} style={{ color: "var(--accent)" }} /> 近期公告
        </p>
        {showAllLink ? (
          <Link
            href="/announcements"
            className="meta text-[12px] font-normal transition-colors hover:text-[var(--accent)]"
          >
            全部
          </Link>
        ) : null}
      </div>
      {items.length === 0 ? (
        <p className="meta mt-2 px-0.5">暂无公告</p>
      ) : (
        <ul className="j13-anno-list j13-rail-scroll">
          {items.map((a) => {
            const current = currentId === a.id;
            return (
              <li key={a.id}>
                <Link
                  href={`/announcement/${a.id}`}
                  className="j13-anno-item"
                  data-tip={a.title}
                  aria-current={current ? "page" : undefined}
                  style={
                    current
                      ? {
                          background: "var(--accent-soft)",
                          borderColor: "color-mix(in srgb, var(--accent) 28%, var(--line))",
                        }
                      : undefined
                  }
                >
                  <span className="j13-anno-item-body">
                    <span className="j13-anno-item-title truncate inline-flex items-center gap-1 min-w-0">
                      {a.pinned ? (
                        <Pin
                          size={11}
                          className="shrink-0"
                          style={{ color: "var(--accent)" }}
                          aria-label="置顶"
                        />
                      ) : null}
                      <span className="truncate">{a.title}</span>
                    </span>
                    <span className="j13-anno-item-meta">
                      {a.tag ? (
                        <span className={`j13-anno-tag is-${a.tag_color}`}>{a.tag}</span>
                      ) : null}
                      <span className="meta text-[11px] tabular-nums">
                        {formatShortDate(a.created_at)}
                      </span>
                    </span>
                  </span>
                </Link>
              </li>
            );
          })}
        </ul>
      )}
    </section>
  );
}