Nicholai
d3158e4c6a
work in progress implementation of: - mixer with channel strips, faders, pan knobs, level meters - timeline with ruler, playhead, sections, keyframe tracks - pattern and progression pickers for drums/chords - automation lanes and mute tracks - loop bracket for loop region selection - export modal placeholder known issues: - drum pattern changes don't update audio engine - timeline keyframes not connected to scheduler - some UI bugs remain this is a checkpoint commit for further iteration
64 lines
1.7 KiB
TypeScript
64 lines
1.7 KiB
TypeScript
'use client';
|
|
|
|
import { Card } from '@/components/ui/card';
|
|
import { Button } from '@/components/ui/button';
|
|
import { cn } from '@/lib/utils';
|
|
import { SectionType, SECTION_COLORS } from '@/types/audio';
|
|
|
|
interface SectionPickerProps {
|
|
onSelect: (type: SectionType) => void;
|
|
onClose: () => void;
|
|
className?: string;
|
|
}
|
|
|
|
const sectionTypes: { type: SectionType; label: string }[] = [
|
|
{ type: 'intro', label: 'Intro' },
|
|
{ type: 'verse', label: 'Verse' },
|
|
{ type: 'chorus', label: 'Chorus' },
|
|
{ type: 'drop', label: 'Drop' },
|
|
{ type: 'bridge', label: 'Bridge' },
|
|
{ type: 'outro', label: 'Outro' },
|
|
];
|
|
|
|
export function SectionPicker({ onSelect, onClose, className }: SectionPickerProps) {
|
|
return (
|
|
<Card
|
|
className={cn(
|
|
'absolute z-50 p-3 bg-card border border-border shadow-xl min-w-[180px]',
|
|
className
|
|
)}
|
|
onClick={(e) => e.stopPropagation()}
|
|
>
|
|
<div className="text-xs font-medium text-muted-foreground uppercase mb-2">
|
|
Add Section
|
|
</div>
|
|
<div className="grid grid-cols-2 gap-2">
|
|
{sectionTypes.map(({ type, label }) => (
|
|
<button
|
|
key={type}
|
|
className={cn(
|
|
'px-4 py-2 rounded-md text-sm font-medium text-white text-center',
|
|
'hover:brightness-110 transition-all'
|
|
)}
|
|
style={{ backgroundColor: SECTION_COLORS[type] }}
|
|
onClick={() => {
|
|
onSelect(type);
|
|
onClose();
|
|
}}
|
|
>
|
|
{label}
|
|
</button>
|
|
))}
|
|
</div>
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
className="w-full mt-2 h-8 text-xs"
|
|
onClick={onClose}
|
|
>
|
|
Cancel
|
|
</Button>
|
|
</Card>
|
|
);
|
|
}
|