Lofi_Generator/components/timeline/DurationSelector.tsx
Nicholai d3158e4c6a feat(timeline-mixer): WIP timeline and mixer components
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
2026-01-20 18:22:10 -07:00

33 lines
856 B
TypeScript

'use client';
import { Button } from '@/components/ui/button';
import { cn } from '@/lib/utils';
interface DurationSelectorProps {
value: number;
onChange: (bars: number) => void;
className?: string;
}
const presets = [8, 16, 32, 64];
export function DurationSelector({ value, onChange, className }: DurationSelectorProps) {
return (
<div className={cn('flex items-center gap-1', className)}>
<span className="text-xs text-muted-foreground mr-1">Duration:</span>
{presets.map((bars) => (
<Button
key={bars}
variant={value === bars ? 'default' : 'outline'}
size="sm"
className="h-6 px-2 text-xs"
onClick={() => onChange(bars)}
>
{bars}
</Button>
))}
<span className="text-xs text-muted-foreground ml-1">bars</span>
</div>
);
}