88 lines
2.8 KiB
TypeScript
88 lines
2.8 KiB
TypeScript
|
"use client";
|
||
|
|
|
||
|
|
import { formatConfidenceLabel } from "./FutureForecastModal.utils";
|
||
|
|
|
||
|
|
export function FutureForecastTodayDecisionBrief({
|
||
|
|
anchorRuleText,
|
||
|
|
anchorSourceLabel,
|
||
|
|
baseCaseBucket,
|
||
|
|
confidence,
|
||
|
|
displayName,
|
||
|
|
downsideBucket,
|
||
|
|
gapToBaseText,
|
||
|
|
locale,
|
||
|
|
meteorologyHeadline,
|
||
|
|
nextObservationLabel,
|
||
|
|
nextObservationTime,
|
||
|
|
pathStatus,
|
||
|
|
settlementStationName,
|
||
|
|
upsideBucket,
|
||
|
|
}: {
|
||
|
|
anchorRuleText: string;
|
||
|
|
anchorSourceLabel: string;
|
||
|
|
baseCaseBucket: string;
|
||
|
|
confidence: string | null | undefined;
|
||
|
|
displayName: string;
|
||
|
|
downsideBucket: string | null | undefined;
|
||
|
|
gapToBaseText: string;
|
||
|
|
locale: string;
|
||
|
|
meteorologyHeadline: string;
|
||
|
|
nextObservationLabel: string;
|
||
|
|
nextObservationTime: string;
|
||
|
|
pathStatus: string;
|
||
|
|
settlementStationName: string;
|
||
|
|
upsideBucket: string | null | undefined;
|
||
|
|
}) {
|
||
|
|
return (
|
||
|
|
<section className="future-v2-meteorology-brief">
|
||
|
|
<div className="future-v2-meteorology-copy">
|
||
|
|
<div className="future-v2-anchor-row">
|
||
|
|
<div className="modal-section-kicker">
|
||
|
|
{locale === "en-US" ? "Professional meteorology read" : "专业气象判断"}
|
||
|
|
</div>
|
||
|
|
<span className="future-v2-anchor-source">{anchorSourceLabel}</span>
|
||
|
|
</div>
|
||
|
|
<h3>{meteorologyHeadline}</h3>
|
||
|
|
<p className="future-v2-anchor-rule">{anchorRuleText}</p>
|
||
|
|
<div className="future-v2-meteorology-meta">
|
||
|
|
<span>
|
||
|
|
{locale === "en-US" ? "Confidence" : "置信度"} ·{" "}
|
||
|
|
{formatConfidenceLabel(confidence, locale)}
|
||
|
|
</span>
|
||
|
|
<span>
|
||
|
|
{locale === "en-US" ? "Path state" : "路径状态"} · {pathStatus}
|
||
|
|
</span>
|
||
|
|
<span>
|
||
|
|
{nextObservationLabel} · {nextObservationTime}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className="future-v2-decision-rail" aria-label={displayName}>
|
||
|
|
<div className="future-v2-decision-anchor">
|
||
|
|
<span>{locale === "en-US" ? "Anchor" : "锚点"}</span>
|
||
|
|
<strong>{settlementStationName}</strong>
|
||
|
|
<small>{anchorSourceLabel}</small>
|
||
|
|
</div>
|
||
|
|
<div className="future-v2-decision-grid">
|
||
|
|
<div>
|
||
|
|
<span>{locale === "en-US" ? "Base" : "基准"}</span>
|
||
|
|
<strong>{baseCaseBucket || "--"}</strong>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<span>{locale === "en-US" ? "Upside" : "上修"}</span>
|
||
|
|
<strong>{upsideBucket || "--"}</strong>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<span>{locale === "en-US" ? "Downside" : "下修"}</span>
|
||
|
|
<strong>{downsideBucket || "--"}</strong>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<span>{locale === "en-US" ? "Gap to base" : "距基准还差"}</span>
|
||
|
|
<strong>{gapToBaseText}</strong>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
);
|
||
|
|
}
|