Function HomeView

frontend/src/App.tsx:310–392

({
  challenges,
  onCreate,
  onOpen,
}: {
  challenges: Challenge[];
  onCreate: () => void;
  onOpen: (id: string) => void;
})

}

function HomeView({
  challenges,
  onCreate,
  onOpen,
}: {
  challenges: Challenge[];
  onCreate: () => void;
  onOpen: (id: string) => void;
}) {
  const [shareMessage, setShareMessage] = useState("");
  const [shareFallbackText, setShareFallbackText] = useState("");

  async function shareChallenge(challenge: Challenge) {
    const text = challengeShareText(challenge);
    const copied = await copyText(text);
    setShareMessage(copied ? "分享文案已复制。" : "复制失败，可手动复制下面的文案。");
    setShareFallbackText(copied ? "" : text);
  }

  return (
    <section className="contentGrid">
      <div className="panel heroPanel">
        <span className="eyebrow">点亮城市</span>
        <h1>勾选一个地图区域，让大家一起来点亮。</h1>
        <p>
          选择学校、公园、街区或任意地点，生成一个可分享的地图挑战。参与者在范围内走动，经过的区域会被点亮。
        </p>
        <div className="heroActions">
          <button className="primaryButton" onClick={onCreate}>
            <Plus size={18} />
            发起挑战
          </button>
          <button
            className="secondaryButton"
            onClick={() => challenges[0] && onOpen(challenges[0].id)}
            disabled={!challenges[0]}
          >
            <Play size={18} />
            打开最新挑战
          </button>
        </div>
      </div>
      <div className="challengeList">
        {shareMessage ? <div className="inlineNotice">{shareMessage}</div> : null}
        {shareFallbackText ? <pre className="shareFallbackText">{shareFallbackText}</pre> : null}
        {challenges.length === 0 ? (
          <div className="panel emptyPanel">
            <MapPin />
            <strong>还没有挑战</strong>
            <span>现在可以发起第一个地图挑战。</span>
          </div>
        ) : (
          challenges.map((challenge) => (
            <article
              key={challenge.id}
              className="challengeCard"
            >
              <button className="challengeCardMain" onClick={() => onOpen(challenge.id)}>