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
+45
-42
@@ -1,6 +1,11 @@
|
||||
import React, { useState } from 'react';
|
||||
import { CBT_GLOSSARY, GlossaryEntry } from '../constants';
|
||||
import { X, Search, BookOpen, Brain, Activity, HelpCircle } from 'lucide-react';
|
||||
import { Button } from './ui/button';
|
||||
import { Input } from './ui/input';
|
||||
import { Badge } from './ui/badge';
|
||||
import { ScrollArea } from './ui/scroll-area';
|
||||
import { Card, CardHeader, CardTitle, CardContent } from './ui/card';
|
||||
|
||||
interface CBTReferenceProps {
|
||||
onClose: () => void;
|
||||
@@ -11,8 +16,8 @@ const CBTReference: React.FC<CBTReferenceProps> = ({ onClose }) => {
|
||||
const [activeCategory, setActiveCategory] = useState<'All' | 'Distortion' | 'Technique' | 'Concept'>('All');
|
||||
|
||||
const filtered = CBT_GLOSSARY.filter(entry => {
|
||||
const matchesSearch = entry.term.toLowerCase().includes(search.toLowerCase()) ||
|
||||
entry.definition.toLowerCase().includes(search.toLowerCase());
|
||||
const matchesSearch = entry.term.toLowerCase().includes(search.toLowerCase()) ||
|
||||
entry.definition.toLowerCase().includes(search.toLowerCase());
|
||||
const matchesCategory = activeCategory === 'All' || entry.category === activeCategory;
|
||||
return matchesSearch && matchesCategory;
|
||||
});
|
||||
@@ -32,7 +37,7 @@ const CBTReference: React.FC<CBTReferenceProps> = ({ onClose }) => {
|
||||
<div className="fixed inset-0 z-[60] flex items-center justify-center p-4 bg-slate-900/60 backdrop-blur-sm">
|
||||
<div className="bg-white rounded-2xl shadow-2xl w-full max-w-4xl h-[85vh] overflow-hidden flex flex-col animate-in fade-in zoom-in duration-300">
|
||||
{/* Header */}
|
||||
<div className="p-6 bg-slate-50 border-b border-slate-200 flex justify-between items-center">
|
||||
<div className="p-6 bg-slate-50 border-b border-slate-200 flex justify-between items-center shrink-0">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="bg-teal-600 p-2 rounded-lg text-white">
|
||||
<BookOpen size={24} />
|
||||
@@ -42,68 +47,66 @@ const CBTReference: React.FC<CBTReferenceProps> = ({ onClose }) => {
|
||||
<p className="text-xs text-slate-500 font-medium uppercase tracking-widest">Evidence-Based Concepts & Frameworks</p>
|
||||
</div>
|
||||
</div>
|
||||
<button onClick={onClose} className="p-2 hover:bg-slate-200 rounded-xl transition-colors text-slate-400">
|
||||
<Button variant="ghost" size="icon" onClick={onClose} className="text-slate-400 hover:bg-slate-200 rounded-xl">
|
||||
<X size={20} />
|
||||
</button>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Filters */}
|
||||
<div className="p-6 space-y-4 border-b border-slate-100 bg-white">
|
||||
<div className="p-6 space-y-4 border-b border-slate-100 bg-white shrink-0">
|
||||
<div className="relative">
|
||||
<Search className="absolute left-4 top-1/2 -translate-y-1/2 text-slate-400" size={18} />
|
||||
<input
|
||||
type="text"
|
||||
<Input
|
||||
type="text"
|
||||
placeholder="Search concepts, distortions, or definitions..."
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.target.value)}
|
||||
className="w-full pl-12 pr-4 py-3 bg-slate-50 border border-slate-200 rounded-xl focus:ring-4 focus:ring-teal-500/10 focus:border-teal-500 focus:outline-none transition-all text-sm"
|
||||
className="w-full pl-12 pr-4 h-12 bg-slate-50 border-slate-200 rounded-xl focus-visible:ring-teal-500/50"
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{categories.map(cat => (
|
||||
<button
|
||||
<Button
|
||||
key={cat}
|
||||
variant={activeCategory === cat ? "default" : "outline"}
|
||||
onClick={() => setActiveCategory(cat)}
|
||||
className={`px-4 py-1.5 rounded-full text-xs font-bold transition-all border ${
|
||||
activeCategory === cat
|
||||
? 'bg-teal-600 text-white border-teal-600 shadow-md shadow-teal-100'
|
||||
: 'bg-white text-slate-500 border-slate-200 hover:border-teal-200 hover:text-teal-600'
|
||||
}`}
|
||||
className={`rounded-full text-xs font-bold ${activeCategory === cat ? 'bg-teal-600 hover:bg-teal-700 shadow-md shadow-teal-100' : 'text-slate-500 hover:text-teal-600 hover:border-teal-200'}`}
|
||||
>
|
||||
{cat}
|
||||
</button>
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="flex-grow overflow-y-auto p-6 scrollbar-hide bg-slate-50/30">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<ScrollArea className="flex-grow bg-slate-50/30 p-6">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 pb-6">
|
||||
{filtered.map((entry, idx) => (
|
||||
<div
|
||||
key={idx}
|
||||
className="bg-white p-5 rounded-2xl border border-slate-200 shadow-sm hover:border-teal-200 transition-all group"
|
||||
>
|
||||
<div className="flex justify-between items-start mb-3">
|
||||
<h3 className="font-bold text-slate-800 group-hover:text-teal-700 transition-colors">{entry.term}</h3>
|
||||
<div className="flex items-center gap-1.5 px-2 py-0.5 bg-slate-50 border border-slate-100 rounded text-[9px] font-black uppercase tracking-tighter text-slate-500">
|
||||
{getCategoryIcon(entry.category)}
|
||||
{entry.category}
|
||||
<Card key={idx} className="hover:border-teal-200 transition-all group shadow-sm border-slate-200">
|
||||
<CardHeader className="pb-2">
|
||||
<div className="flex justify-between items-start mb-2">
|
||||
<CardTitle className="text-base group-hover:text-teal-700 transition-colors">{entry.term}</CardTitle>
|
||||
<Badge variant="outline" className="flex items-center gap-1.5 px-2 py-0.5 bg-slate-50 border-slate-100 rounded text-[9px] font-black uppercase tracking-tighter text-slate-500">
|
||||
{getCategoryIcon(entry.category)}
|
||||
{entry.category}
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-sm text-slate-600 leading-relaxed mb-4 font-light">
|
||||
{entry.definition}
|
||||
</p>
|
||||
{entry.example && (
|
||||
<div className="bg-teal-50/50 p-3 rounded-xl border border-teal-100">
|
||||
<span className="text-[9px] font-black uppercase text-teal-600 block mb-1">Clinical Example</span>
|
||||
<p className="text-xs text-teal-800 italic leading-relaxed">"{entry.example}"</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-sm text-slate-600 leading-relaxed mb-4 font-light">
|
||||
{entry.definition}
|
||||
</p>
|
||||
{entry.example && (
|
||||
<div className="bg-teal-50/50 p-3 rounded-xl border border-teal-100">
|
||||
<span className="text-[9px] font-black uppercase text-teal-600 block mb-1">Clinical Example</span>
|
||||
<p className="text-xs text-teal-800 italic leading-relaxed">"{entry.example}"</p>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
|
||||
|
||||
{filtered.length === 0 && (
|
||||
<div className="col-span-full py-20 text-center space-y-4">
|
||||
<div className="w-16 h-16 bg-slate-100 rounded-full flex items-center justify-center mx-auto text-slate-400">
|
||||
@@ -113,10 +116,10 @@ const CBTReference: React.FC<CBTReferenceProps> = ({ onClose }) => {
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</ScrollArea>
|
||||
|
||||
{/* Footer */}
|
||||
<div className="p-4 bg-white border-t border-slate-100 text-center">
|
||||
<div className="p-4 bg-white border-t border-slate-100 text-center shrink-0">
|
||||
<p className="text-[10px] text-slate-400 font-medium uppercase tracking-widest">
|
||||
References compiled from clinical CBT standard frameworks.
|
||||
</p>
|
||||
|
||||
Reference in new issue
Block a user