mikemoi
67 lines
2.4 KiB
TypeScript
67 lines
2.4 KiB
TypeScript
'use client';
|
|
|
|
import { calculateOEPSResults } from '../../test/private/OEPSCalculator';
|
|
|
|
interface OEPSResultProps {
|
|
answers: string[];
|
|
}
|
|
|
|
function barWidth(value: number) {
|
|
return `${Math.max(0, Math.min(100, (value / 5) * 100))}%`;
|
|
}
|
|
|
|
export function OEPSResult({ answers }: OEPSResultProps) {
|
|
const result = calculateOEPSResults(answers);
|
|
|
|
return (
|
|
<div className="mt-6 space-y-6">
|
|
<div className="bg-white border rounded-lg p-6 shadow-sm">
|
|
<h3 className="text-lg font-semibold mb-2">九型人格结果</h3>
|
|
<p className="text-sm text-muted-foreground">
|
|
你的最高候选类型是：
|
|
</p>
|
|
<div className="mt-4 rounded-lg border bg-indigo-50 border-indigo-200 p-4">
|
|
<div className="text-2xl font-semibold text-indigo-700">
|
|
{result.top.name}
|
|
</div>
|
|
<p className="text-sm text-indigo-900 mt-2">{result.top.description}</p>
|
|
<p className="text-sm text-indigo-900 mt-2">
|
|
平均分：{result.top.average.toFixed(2)} / 5
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="bg-white border rounded-lg p-6 shadow-sm">
|
|
<h4 className="font-semibold mb-4">九型分数排序</h4>
|
|
<div className="space-y-3">
|
|
{result.ranked.map((item) => (
|
|
<div key={item.type} className="rounded border p-4">
|
|
<div className="flex items-start justify-between gap-4 mb-2">
|
|
<div>
|
|
<div className="font-medium">{item.name}</div>
|
|
<div className="text-sm text-muted-foreground">
|
|
{item.description}
|
|
</div>
|
|
</div>
|
|
<div className="text-right font-semibold text-indigo-600">
|
|
{item.average.toFixed(2)}
|
|
</div>
|
|
</div>
|
|
<div className="h-2 rounded-full bg-gray-100 overflow-hidden">
|
|
<div
|
|
className="h-full rounded-full bg-indigo-500"
|
|
style={{ width: barWidth(item.average) }}
|
|
/>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="bg-gray-50 border rounded-lg p-4 text-sm text-gray-700">
|
|
OEPS 和九型人格适合作为自我探索材料。若前几名分数接近，建议把它们都作为候选类型继续阅读和核对，不要只看最高分。
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|