5ed84192d5
- Set up Next.js project with shadcn/ui and Tailwind CSS - Created audio engine with MembraneSynth drums, FMSynth chords, and ambient noise layers - Implemented 16-step drum sequencer with boom bap patterns - Added jazz chord progressions (ii-V-I, minor key, neo soul) - Built React hook for audio state management - Created UI components: transport controls, volume sliders, layer mixer, beat visualizer - Applied lofi-themed dark color scheme with oklch colors Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
46 lines
998 B
TypeScript
46 lines
998 B
TypeScript
'use client';
|
|
|
|
import { Button } from '@/components/ui/button';
|
|
import { Play, Pause, Shuffle } from 'lucide-react';
|
|
|
|
interface TransportControlsProps {
|
|
isPlaying: boolean;
|
|
isInitialized: boolean;
|
|
onTogglePlayback: () => void;
|
|
onGenerateNewBeat: () => void;
|
|
}
|
|
|
|
export function TransportControls({
|
|
isPlaying,
|
|
isInitialized,
|
|
onTogglePlayback,
|
|
onGenerateNewBeat,
|
|
}: TransportControlsProps) {
|
|
return (
|
|
<div className="flex items-center gap-4">
|
|
<Button
|
|
size="lg"
|
|
onClick={onTogglePlayback}
|
|
className="h-14 w-14 rounded-full"
|
|
>
|
|
{isPlaying ? (
|
|
<Pause className="h-6 w-6" />
|
|
) : (
|
|
<Play className="h-6 w-6 ml-1" />
|
|
)}
|
|
</Button>
|
|
|
|
<Button
|
|
variant="secondary"
|
|
size="lg"
|
|
onClick={onGenerateNewBeat}
|
|
disabled={!isInitialized && !isPlaying}
|
|
className="gap-2"
|
|
>
|
|
<Shuffle className="h-4 w-4" />
|
|
New Beat
|
|
</Button>
|
|
</div>
|
|
);
|
|
}
|