John Remillard
a7a8c661b7
Introduces a new `UserSettings` interface and default settings. This allows users to customize voice preferences (name, style, gender) and persona characteristics within the application. This enhances personalization and user experience by tailoring interactions to individual needs and preferences.
81 lines
3.6 KiB
TypeScript
81 lines
3.6 KiB
TypeScript
|
|
import React from 'react';
|
|
import { Scenario } from '../types';
|
|
import { Mic, MessageSquare, Info } from 'lucide-react';
|
|
import Tooltip from './Tooltip';
|
|
|
|
interface ScenarioCardProps {
|
|
scenario: Scenario;
|
|
onSelect: (scenario: Scenario, mode: 'text' | 'voice') => void;
|
|
}
|
|
|
|
const ScenarioCard: React.FC<ScenarioCardProps> = ({ scenario, onSelect }) => {
|
|
const getDifficultyColor = (diff: string) => {
|
|
switch (diff) {
|
|
case 'Beginner': return 'bg-teal-50 text-teal-800 border-teal-100';
|
|
case 'Intermediate': return 'bg-amber-50 text-amber-800 border-amber-100';
|
|
case 'Advanced': return 'bg-rose-50 text-rose-800 border-rose-100';
|
|
default: return 'bg-slate-50 text-slate-800 border-slate-100';
|
|
}
|
|
};
|
|
|
|
const difficultyExplanations: Record<string, string> = {
|
|
'Beginner': 'Low-stakes environment with highly structured feedback and clear cognitive distortions.',
|
|
'Intermediate': 'Moderate social friction requiring nuanced responses and identifying subtle distortions.',
|
|
'Advanced': 'High-trigger environment with resistant AI personas to test deep emotional regulation.'
|
|
};
|
|
|
|
return (
|
|
<div className="bg-white rounded-xl p-6 shadow-sm border border-slate-200 hover:border-teal-200 hover:shadow-md transition-all flex flex-col h-full group">
|
|
<div className="flex justify-between items-start mb-4">
|
|
<Tooltip content={difficultyExplanations[scenario.difficulty]}>
|
|
<span className={`px-2.5 py-0.5 rounded-full text-[10px] font-bold uppercase tracking-wider border cursor-help ${getDifficultyColor(scenario.difficulty)}`}>
|
|
{scenario.difficulty}
|
|
</span>
|
|
</Tooltip>
|
|
<span className="text-[10px] font-bold text-slate-400 uppercase tracking-widest">
|
|
{scenario.category}
|
|
</span>
|
|
</div>
|
|
|
|
<h3 className="text-lg font-bold text-slate-800 mb-2 group-hover:text-teal-700 transition-colors">{scenario.title}</h3>
|
|
<p className="text-slate-600 text-sm mb-5 flex-grow leading-relaxed font-light">{scenario.description}</p>
|
|
|
|
<div className="mb-6">
|
|
<div className="flex flex-wrap gap-1.5">
|
|
{scenario.cbtFocus.map(focus => (
|
|
<Tooltip key={focus} content={`Specific CBT protocol targeting: ${focus}`}>
|
|
<span className="text-[10px] font-medium bg-slate-50 text-slate-500 px-2 py-0.5 rounded border border-slate-100 cursor-help flex items-center gap-1">
|
|
{focus}
|
|
</span>
|
|
</Tooltip>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 gap-3 mt-auto">
|
|
<Tooltip content="Engage in a structured text-based roleplay with real-time feedback." position="bottom">
|
|
<button
|
|
onClick={() => onSelect(scenario, 'text')}
|
|
className="w-full flex items-center justify-center gap-2 px-4 py-2 rounded-lg bg-slate-50 text-slate-600 hover:bg-slate-100 transition-all font-semibold text-xs border border-slate-200"
|
|
>
|
|
<MessageSquare size={14} />
|
|
Chat
|
|
</button>
|
|
</Tooltip>
|
|
<Tooltip content="Practice verbal emotional regulation and vocal expression in real-time." position="bottom">
|
|
<button
|
|
onClick={() => onSelect(scenario, 'voice')}
|
|
className="w-full flex items-center justify-center gap-2 px-4 py-2 rounded-lg bg-teal-600 text-white hover:bg-teal-700 transition-all font-semibold text-xs shadow-sm shadow-teal-100"
|
|
>
|
|
<Mic size={14} />
|
|
Voice
|
|
</button>
|
|
</Tooltip>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default React.memo(ScenarioCard);
|