frontend-admin / Daocheng-Yading

  import { Compass } from "lucide-react";
  import { PAGE_CONTENT_INSET } from "../pageContentInset";

  import { useI18n } from "../i18n";

  
  const GUIDE_IMAGE_SRC = "/planetarium/lhaaso-aerial.jpg";
  
  export function PlanetariumGuidePage() {

    const { t } = useI18n();

    return (
      <div className={`w-full min-w-0 max-w-full ${PAGE_CONTENT_INSET}`}>
        <div className="flex w-full min-w-0 flex-col">
          <h2 className="mb-3 flex shrink-0 items-center gap-2 text-xl font-bold text-white sm:text-2xl">
            <Compass className="h-6 w-6 shrink-0 text-sky-400" aria-hidden />

            {t("nav.planetarium")}

          </h2>
          <div className="w-full min-w-0 overflow-hidden rounded-2xl border border-white/20 bg-white/[0.06] p-3 shadow-lg shadow-black/20 sm:p-4 lg:p-5">
            <div className="relative h-[min(69svh,calc(100svh-10.5rem))] w-full min-h-[14rem] overflow-hidden rounded-xl sm:h-[min(73svh,calc(100svh-11.5rem))] sm:min-h-[17rem] lg:h-[min(75svh,calc(100svh-12.5rem))] lg:min-h-[19.5rem]">
              <img
                src={GUIDE_IMAGE_SRC}
                alt="天文馆蓝图航拍实景：高海拔宇宙线观测站（LHAASO）台址，中央为大型白色实验建筑，周围为广布于高原台地的探测器阵列与路径网络，蓝天云层与山地景观。"
                className="absolute inset-0 h-full w-full object-cover object-center"
                width={1024}
                height={685}
                loading="eager"
                decoding="async"
              />
            </div>
          </div>
        </div>
      </div>
    );
  }