30 lines
1015 B
TypeScript
30 lines
1015 B
TypeScript
import { useAppStore } from "../stores/app-store";
|
|
|
|
export function PreviewBox() {
|
|
const text = useAppStore((s) => s.previewText);
|
|
const active = useAppStore((s) => s.previewActive);
|
|
const weakNetwork = useAppStore((s) => s.weakNetwork);
|
|
const recording = useAppStore((s) => s.recording);
|
|
const hasText = text.length > 0;
|
|
const placeholder =
|
|
weakNetwork && recording ? "网络波动中，音频缓冲后发送…" : "按住说话…";
|
|
|
|
return (
|
|
<section className="shrink-0 pb-3">
|
|
<div
|
|
className={`scrollbar-thin max-h-40 min-h-20 overflow-y-auto rounded-card border px-[18px] py-4 transition-all duration-300 ${
|
|
active
|
|
? "border-accent/40 bg-linear-to-b from-accent/[0.03] to-surface shadow-[0_0_0_1px_rgba(99,102,241,0.2),0_4px_24px_-4px_rgba(99,102,241,0.15)]"
|
|
: "border-edge bg-surface"
|
|
}`}
|
|
>
|
|
<p
|
|
className={`break-words text-base leading-relaxed ${hasText ? "" : "text-fg-dim"}`}
|
|
>
|
|
{hasText ? text : placeholder}
|
|
</p>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|