John Remillard
c78604de02
Sets up the basic project configuration for Cognitive Clarity. This includes: - Initializing `package.json` with necessary dependencies (React, Gemini API, Lucide React) and build scripts for Vite. - Creating a basic `index.html` with Tailwind CSS and Google Fonts integration. - Setting up `index.tsx` as the React application entry point. - Configuring `tsconfig.json` for TypeScript compilation with Vite. - Establishing `vite.config.ts` for development server setup and environment variable handling. - Adding a standard `.gitignore` file. - Updating `README.md` with local run instructions and AI Studio links. - Defining `metadata.json` for application details. - Creating core type definitions in `types.ts`. - Populating `constants.ts` with initial CBT glossary terms. - Adding utility functions for audio processing in `services/audioUtils.ts`.
64 lines
2.6 KiB
TypeScript
64 lines
2.6 KiB
TypeScript
import React from 'react';
|
|
import { Scenario } from '../types';
|
|
import { Mic, MessageSquare } from 'lucide-react';
|
|
|
|
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';
|
|
}
|
|
};
|
|
|
|
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">
|
|
<span className={`px-2.5 py-0.5 rounded-full text-[10px] font-bold uppercase tracking-wider border ${getDifficultyColor(scenario.difficulty)}`}>
|
|
{scenario.difficulty}
|
|
</span>
|
|
<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 => (
|
|
<span key={focus} className="text-[10px] font-medium bg-slate-50 text-slate-500 px-2 py-0.5 rounded border border-slate-100">
|
|
{focus}
|
|
</span>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 gap-3 mt-auto">
|
|
<button
|
|
onClick={() => onSelect(scenario, 'text')}
|
|
className="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>
|
|
<button
|
|
onClick={() => onSelect(scenario, 'voice')}
|
|
className="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>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ScenarioCard; |