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`.
38 lines
1.1 KiB
TypeScript
38 lines
1.1 KiB
TypeScript
import React from 'react';
|
|
|
|
interface AudioVisualizerProps {
|
|
level: number;
|
|
active: boolean;
|
|
}
|
|
|
|
const AudioVisualizer: React.FC<AudioVisualizerProps> = ({ level, active }) => {
|
|
const barCount = 19;
|
|
return (
|
|
<div className="flex items-center justify-center gap-1.5 h-24 w-full px-4">
|
|
{Array.from({ length: barCount }).map((_, i) => {
|
|
const center = (barCount - 1) / 2;
|
|
const dist = Math.abs(i - center);
|
|
const multiplier = Math.pow(0.88, dist);
|
|
const jitter = 0.8 + (Math.sin(i * 1.5) * 0.2);
|
|
const height = active ? Math.max(8, level * multiplier * jitter) : 6;
|
|
|
|
return (
|
|
<div
|
|
key={i}
|
|
className={`w-1.5 rounded-full transition-all duration-100 ease-out border-b border-white/5 ${
|
|
active
|
|
? 'bg-teal-400 shadow-[0_0_15px_rgba(45,212,191,0.6)]'
|
|
: 'bg-slate-700/50'
|
|
}`}
|
|
style={{
|
|
height: `${height}%`,
|
|
opacity: active ? 1 - (dist / barCount) : 0.3
|
|
}}
|
|
/>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default React.memo(AudioVisualizer); |