feat: Initialize project structure
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`.
This commit is contained in:
John Remillard committed
1 parent
a6780ce1b2
commit
c78604de02
22 files changed
+2097
-8
No files matched your search
@@ -0,0 +1,129 @@
|
||||
import React, { useState } from 'react';
|
||||
import { CBT_GLOSSARY, GlossaryEntry } from '../constants';
|
||||
import { X, Search, BookOpen, Brain, Activity, HelpCircle } from 'lucide-react';
|
||||
|
||||
interface CBTReferenceProps {
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
const CBTReference: React.FC<CBTReferenceProps> = ({ onClose }) => {
|
||||
const [search, setSearch] = useState('');
|
||||
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 matchesCategory = activeCategory === 'All' || entry.category === activeCategory;
|
||||
return matchesSearch && matchesCategory;
|
||||
});
|
||||
|
||||
const categories: ('All' | 'Distortion' | 'Technique' | 'Concept')[] = ['All', 'Distortion', 'Technique', 'Concept'];
|
||||
|
||||
const getCategoryIcon = (cat: string) => {
|
||||
switch (cat) {
|
||||
case 'Distortion': return <Brain size={16} className="text-rose-500" />;
|
||||
case 'Technique': return <Activity size={16} className="text-teal-500" />;
|
||||
case 'Concept': return <HelpCircle size={16} className="text-amber-500" />;
|
||||
default: return <BookOpen size={16} />;
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<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="flex items-center gap-3">
|
||||
<div className="bg-teal-600 p-2 rounded-lg text-white">
|
||||
<BookOpen size={24} />
|
||||
</div>
|
||||
<div>
|
||||
<h2 className="text-xl font-bold text-slate-800">CBT Clinical Reference</h2>
|
||||
<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">
|
||||
<X size={20} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Filters */}
|
||||
<div className="p-6 space-y-4 border-b border-slate-100 bg-white">
|
||||
<div className="relative">
|
||||
<Search className="absolute left-4 top-1/2 -translate-y-1/2 text-slate-400" size={18} />
|
||||
<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"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{categories.map(cat => (
|
||||
<button
|
||||
key={cat}
|
||||
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'
|
||||
}`}
|
||||
>
|
||||
{cat}
|
||||
</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">
|
||||
{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}
|
||||
</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>
|
||||
))}
|
||||
|
||||
{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">
|
||||
<Search size={32} />
|
||||
</div>
|
||||
<p className="text-slate-400 text-sm font-medium">No concepts matching your search parameters.</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<div className="p-4 bg-white border-t border-slate-100 text-center">
|
||||
<p className="text-[10px] text-slate-400 font-medium uppercase tracking-widest">
|
||||
References compiled from clinical CBT standard frameworks.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CBTReference;
|
||||
Reference in new issue
Block a user