clean up prompts and improve quality
This commit is contained in:
jpremill committed
1 parent
9290cc18fd
commit
5b2da87f05
44 files changed
+6711
-414
No files matched your search
+68
-52
@@ -1,8 +1,10 @@
|
||||
|
||||
import React from 'react';
|
||||
import { Scenario } from '../types';
|
||||
import { Mic, MessageSquare, Trash2 } from 'lucide-react';
|
||||
import Tooltip from './Tooltip';
|
||||
import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from './ui/card';
|
||||
import { Button } from './ui/button';
|
||||
import { Badge } from './ui/badge';
|
||||
|
||||
interface ScenarioCardProps {
|
||||
scenario: Scenario;
|
||||
@@ -11,12 +13,12 @@ interface ScenarioCardProps {
|
||||
}
|
||||
|
||||
const ScenarioCard: React.FC<ScenarioCardProps> = ({ scenario, onSelect, onDelete }) => {
|
||||
const getDifficultyColor = (diff: string) => {
|
||||
const getDifficultyVariant = (diff: string): "default" | "secondary" | "destructive" | "outline" => {
|
||||
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';
|
||||
case 'Beginner': return 'default';
|
||||
case 'Intermediate': return 'secondary';
|
||||
case 'Advanced': return 'destructive';
|
||||
default: return 'outline';
|
||||
}
|
||||
};
|
||||
|
||||
@@ -27,69 +29,83 @@ const ScenarioCard: React.FC<ScenarioCardProps> = ({ scenario, onSelect, onDelet
|
||||
};
|
||||
|
||||
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 relative">
|
||||
<Card className="hover:border-teal-200 hover:shadow-md transition-all flex flex-col h-full group relative overflow-hidden">
|
||||
{onDelete && (
|
||||
<button
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onDelete(scenario.id);
|
||||
}}
|
||||
className="absolute top-4 right-4 p-2 text-slate-300 hover:text-rose-500 hover:bg-rose-50 rounded-lg transition-all opacity-0 group-hover:opacity-100"
|
||||
className="absolute top-2 right-2 text-slate-300 hover:text-rose-500 hover:bg-rose-50 opacity-0 group-hover:opacity-100 transition-all z-10"
|
||||
title="Delete custom scenario"
|
||||
>
|
||||
<Trash2 size={16} />
|
||||
</button>
|
||||
</Button>
|
||||
)}
|
||||
|
||||
<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>
|
||||
{!onDelete && (
|
||||
<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 pr-6">{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">
|
||||
<CardHeader className="pb-2">
|
||||
<div className="flex justify-between items-start mb-2">
|
||||
<Tooltip content={difficultyExplanations[scenario.difficulty] || ""}>
|
||||
<div className="cursor-help">
|
||||
<Badge variant={getDifficultyVariant(scenario.difficulty)} className="text-[10px] uppercase tracking-wider">
|
||||
{scenario.difficulty}
|
||||
</Badge>
|
||||
</div>
|
||||
</Tooltip>
|
||||
{!onDelete && (
|
||||
<span className="text-[10px] font-bold text-slate-400 uppercase tracking-widest">
|
||||
{scenario.category}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<CardTitle className="text-lg group-hover:text-teal-700 transition-colors pr-6">
|
||||
{scenario.title}
|
||||
</CardTitle>
|
||||
<CardDescription className="text-sm flex-grow leading-relaxed font-light">
|
||||
{scenario.description}
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
|
||||
<CardContent className="flex-grow">
|
||||
<div className="flex flex-wrap gap-1.5 mt-2">
|
||||
{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">
|
||||
<Badge variant="outline" className="text-[10px] font-medium bg-slate-50 text-slate-500 cursor-help">
|
||||
{focus}
|
||||
</span>
|
||||
</Badge>
|
||||
</Tooltip>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
|
||||
<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>
|
||||
<CardFooter className="pt-0">
|
||||
<div className="grid grid-cols-2 gap-3 w-full">
|
||||
<Tooltip content="Engage in a structured text-based roleplay with real-time feedback." position="bottom">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => onSelect(scenario, 'text')}
|
||||
className="w-full text-slate-600 font-semibold text-xs"
|
||||
>
|
||||
<MessageSquare size={14} className="mr-2" />
|
||||
Chat
|
||||
</Button>
|
||||
</Tooltip>
|
||||
<Tooltip content="Practice verbal emotional regulation and vocal expression in real-time." position="bottom">
|
||||
<Button
|
||||
size="sm"
|
||||
onClick={() => onSelect(scenario, 'voice')}
|
||||
className="w-full bg-teal-600 hover:bg-teal-700 text-white font-semibold text-xs shadow-sm shadow-teal-100"
|
||||
>
|
||||
<Mic size={14} className="mr-2" />
|
||||
Voice
|
||||
</Button>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
Reference in new issue
Block a user