Jesse_Chen
57 lines
2.4 KiB
TypeScript
57 lines
2.4 KiB
TypeScript
"use client";
|
||
|
||
import { useState } from "react";
|
||
import type { JourneyProgress } from "@/lib/birth-time-journey-turn";
|
||
import { protectOnboardingPhrases } from "@/lib/onboarding-copy";
|
||
|
||
type BirthTimeGuideTurnProps = {
|
||
readonly question: string;
|
||
readonly progress: JourneyProgress;
|
||
readonly pending: boolean;
|
||
readonly onSubmit: (message: string) => void;
|
||
readonly onSkip: () => void;
|
||
readonly onPause: () => void;
|
||
};
|
||
|
||
export function BirthTimeGuideTurn(props: BirthTimeGuideTurnProps) {
|
||
const [message, setMessage] = useState("");
|
||
const phase = props.progress.adaptiveRound > 0
|
||
? `自适应第 ${props.progress.adaptiveRound} / ${props.progress.maxAdaptiveRounds} 轮`
|
||
: "基础证据";
|
||
|
||
return (
|
||
<div className="birth-time-guide-turn" aria-live="polite">
|
||
<div className="birth-time-question-progress">
|
||
<b>{phase}</b>
|
||
<span>已确认 {props.progress.confirmedEvidenceCount} 条 / {props.progress.baselineDomainCount} 个领域</span>
|
||
</div>
|
||
<p className="birth-time-guide-question">{protectOnboardingPhrases(props.question)}</p>
|
||
<label className="birth-time-guide-composer">
|
||
<span>说说这段经历</span>
|
||
<textarea
|
||
aria-describedby="birth-time-guide-hint"
|
||
disabled={props.pending}
|
||
maxLength={500}
|
||
rows={3}
|
||
value={message}
|
||
onChange={(event) => setMessage(event.target.value)}
|
||
onKeyDown={(event) => {
|
||
if ((event.metaKey || event.ctrlKey) && event.key === "Enter" && message.trim()) {
|
||
event.preventDefault();
|
||
props.onSubmit(message.trim());
|
||
}
|
||
}}
|
||
/>
|
||
</label>
|
||
<p id="birth-time-guide-hint" className="birth-time-guide-hint">说出大概年份也可以，不需要为了校正而猜测。</p>
|
||
<div className="birth-time-guided-actions">
|
||
<button className="button-text birth-time-guided-action" disabled={props.pending} type="button" onClick={props.onPause}>暂停，稍后继续</button>
|
||
<button className="button-secondary birth-time-guided-action" disabled={props.pending} type="button" onClick={props.onSkip}>不记得，跳过</button>
|
||
<button className="button-primary birth-time-guided-action" disabled={props.pending || !message.trim()} type="button" onClick={() => props.onSubmit(message.trim())}>
|
||
{props.pending ? "整理中…" : "整理为经历草稿"}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|