39 lines
1.2 KiB
TypeScript
39 lines
1.2 KiB
TypeScript
import type { VisualNovelRunSnapshot } from '../../../packages/shared/src/contracts/visualNovel';
|
|
|
|
type VisualNovelAttributePanelProps = {
|
|
run: VisualNovelRunSnapshot;
|
|
};
|
|
|
|
export function VisualNovelAttributePanel({ run }: VisualNovelAttributePanelProps) {
|
|
const metrics = Object.entries(run.metrics);
|
|
|
|
if (metrics.length === 0) {
|
|
return (
|
|
<div className="rounded-[1rem] border border-[var(--platform-subpanel-border)] bg-white/74 px-4 py-5 text-center text-sm font-semibold text-[var(--platform-text-soft)]">
|
|
暂无属性
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-3">
|
|
{metrics.map(([key, value]) => (
|
|
<div key={key}>
|
|
<div className="mb-1 flex items-center justify-between text-xs font-bold text-[var(--platform-text-soft)]">
|
|
<span>{key}</span>
|
|
<span>{value}</span>
|
|
</div>
|
|
<div className="h-2 overflow-hidden rounded-full bg-[var(--platform-track-fill)]">
|
|
<div
|
|
className="h-full rounded-full bg-[var(--platform-button-primary-solid)]"
|
|
style={{ width: `${Math.min(100, Math.max(0, value))}%` }}
|
|
/>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default VisualNovelAttributePanel;
|