forked from averyfelts/Lofi_Generator
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>
38 lines
855 B
TypeScript
38 lines
855 B
TypeScript
'use client';
|
|
|
|
import { Slider } from '@/components/ui/slider';
|
|
import { Label } from '@/components/ui/label';
|
|
|
|
interface VolumeControlProps {
|
|
label: string;
|
|
value: number;
|
|
onChange: (value: number) => void;
|
|
className?: string;
|
|
}
|
|
|
|
export function VolumeControl({
|
|
label,
|
|
value,
|
|
onChange,
|
|
className = '',
|
|
}: VolumeControlProps) {
|
|
return (
|
|
<div className={`space-y-2 ${className}`}>
|
|
<div className="flex items-center justify-between">
|
|
<Label className="text-sm text-muted-foreground">{label}</Label>
|
|
<span className="text-xs text-muted-foreground font-mono">
|
|
{Math.round(value * 100)}%
|
|
</span>
|
|
</div>
|
|
<Slider
|
|
value={[value]}
|
|
onValueChange={([v]) => onChange(v)}
|
|
min={0}
|
|
max={1}
|
|
step={0.01}
|
|
className="w-full"
|
|
/>
|
|
</div>
|
|
);
|
|
}
|