110 lines
4.9 KiB
TypeScript
110 lines
4.9 KiB
TypeScript
import { BookOpen, Brain, CheckCircle, Sparkles } from 'lucide-react';
|
|
|
|
import PersonalityQuiz from '@/components/frameworks/PersonalityQuiz';
|
|
import type {
|
|
EmotionalIntelligencePageActions,
|
|
EmotionalIntelligencePageState,
|
|
} from '@/components/emotional-intelligence/types';
|
|
import { StatePanel } from '@/components/ui/state-panel';
|
|
|
|
type PersonalityQuizTabProps = {
|
|
state: EmotionalIntelligencePageState;
|
|
actions: EmotionalIntelligencePageActions;
|
|
};
|
|
|
|
export function PersonalityQuizTab({ state, actions }: PersonalityQuizTabProps) {
|
|
const workplaceContent = state.personalityWorkplaceContent;
|
|
const hasContentError = Boolean(state.contentError);
|
|
|
|
return (
|
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
|
<div className="lg:col-span-2">
|
|
{state.isLoadingSaved ? (
|
|
<StatePanel tone="violet" size="lg" alignment="center" loading>
|
|
Loading your saved results...
|
|
</StatePanel>
|
|
) : (
|
|
<PersonalityQuiz
|
|
onViewDirectory={() => actions.setActiveTab('directory')}
|
|
onResult={actions.handlePersonalityResult}
|
|
questions={state.personalityQuiz?.questions}
|
|
savedType={state.personalityResult}
|
|
savedAnswers={state.savedAnswers}
|
|
savedDate={state.savedDate}
|
|
isSaving={state.isSaving}
|
|
canPersistResult={state.canPersistPersonalResults}
|
|
/>
|
|
)}
|
|
</div>
|
|
|
|
<div className="space-y-4">
|
|
{state.contentLoading && (
|
|
<StatePanel tone="slate">
|
|
Loading personality workplace content...
|
|
</StatePanel>
|
|
)}
|
|
|
|
{hasContentError && (
|
|
<StatePanel tone="red" role="alert">
|
|
Personality workplace content could not be loaded from the backend.
|
|
</StatePanel>
|
|
)}
|
|
|
|
{!state.contentLoading && !hasContentError && workplaceContent && (
|
|
<div className="bg-slate-800/40 backdrop-blur-sm rounded-2xl border border-slate-700/40 p-5">
|
|
<h3 className="font-semibold text-white mb-3 flex items-center gap-2">
|
|
<Brain size={16} className="text-violet-400" /> What is MBTI?
|
|
</h3>
|
|
<p className="text-xs text-slate-400 leading-relaxed mb-3">
|
|
{workplaceContent.mbtiDescription}
|
|
</p>
|
|
<div className="space-y-2">
|
|
{workplaceContent.dimensions.map((item) => (
|
|
<div key={item.dim} className="bg-violet-500/5 border border-violet-500/10 rounded-lg p-2.5">
|
|
<div className="flex items-center gap-2 mb-0.5">
|
|
<span className="text-xs font-bold text-violet-400 bg-violet-500/15 px-2 py-0.5 rounded">{item.dim}</span>
|
|
<span className="text-xs font-medium text-white">{item.label}</span>
|
|
</div>
|
|
<p className="text-[10px] text-slate-500 ml-[52px]">{item.desc}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<div className="bg-gradient-to-br from-indigo-500/10 to-blue-500/10 backdrop-blur-sm rounded-2xl border border-indigo-500/20 p-5">
|
|
<div className="flex items-center gap-3 mb-3">
|
|
<div className="w-10 h-10 rounded-xl bg-gradient-to-br from-indigo-500 to-blue-600 flex items-center justify-center shadow-lg">
|
|
<BookOpen size={18} className="text-white" />
|
|
</div>
|
|
<div>
|
|
<h3 className="font-semibold text-white text-sm">Type Directory</h3>
|
|
<p className="text-[10px] text-slate-400">Explore all 16 types</p>
|
|
</div>
|
|
</div>
|
|
<p className="text-xs text-slate-400 mb-3">Browse all personality types to understand colleagues' work styles, communication preferences, and relationship needs.</p>
|
|
<button type="button" onClick={() => actions.setActiveTab('directory')} className="w-full py-2.5 bg-slate-700/50 text-slate-300 rounded-xl font-medium text-sm hover:bg-slate-700/70 transition-all border border-slate-600/30 flex items-center justify-center gap-2">
|
|
<BookOpen size={14} /> Browse All 16 Types
|
|
</button>
|
|
</div>
|
|
|
|
{!state.contentLoading && !hasContentError && workplaceContent && (
|
|
<div className="bg-slate-800/40 backdrop-blur-sm rounded-2xl border border-slate-700/40 p-5">
|
|
<h3 className="font-semibold text-white mb-3 flex items-center gap-2">
|
|
<Sparkles size={16} className="text-amber-400" /> Why This Matters at Work
|
|
</h3>
|
|
<div className="space-y-2.5">
|
|
{workplaceContent.workplaceTips.map((tip) => (
|
|
<div key={tip} className="flex items-start gap-2 p-2 rounded-lg bg-amber-500/5 border border-amber-500/10">
|
|
<CheckCircle size={14} className="text-amber-400 mt-0.5 flex-shrink-0" />
|
|
<p className="text-xs text-slate-300">{tip}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|