speice.io/blog/2024-11-15-playing-with-fire/2-transforms/VariationEditor.tsx

import styles from "../src/css/styles.module.css"

export interface VariationProps {
    linear: number;
    julia: number;
    popcorn: number;
    pdj: number;
}

export interface Props {
    title: String;
    variations: VariationProps;
    setVariations: (variations: VariationProps) => void;
    resetVariations: () => void;
}

export const VariationEditor = ({title, variations, setVariations, resetVariations}: Props) => {
    const resetButton = <button className={styles.inputReset} onClick={resetVariations}>Reset</button>

    return (
        <div className={styles.inputGroup} style={{display: 'grid', gridTemplateColumns: '1fr 1fr'}}>
            <p className={styles.inputTitle} style={{gridColumn: '1/-1'}}>{title} {resetButton}</p>
            <div className={styles.inputElement}>
                <span>Linear: {variations.linear}</span>
                <input type={'range'} min={0} max={1} step={0.01} style={{width: '100%'}} value={variations.linear}
                       onInput={e => setVariations({...variations, linear: Number(e.currentTarget.value)})}/>
            </div>
            <div className={styles.inputElement}>
                <span>Julia: {variations.julia}</span>
                <input type={'range'} min={0} max={1} step={0.01} style={{width: '100%'}} value={variations.julia}
                       onInput={e => setVariations({...variations, julia: Number(e.currentTarget.value)})}/>
            </div>
            <div className={styles.inputElement}>
                <span>Popcorn: {variations.popcorn}</span>
                <input type={'range'} min={0} max={1} step={0.01} style={{width: '100%'}} value={variations.popcorn}
                       onInput={e => setVariations({...variations, popcorn: Number(e.currentTarget.value)})}/>
            </div>
            <div className={styles.inputElement}>
                <span>PDJ: {variations.pdj}</span>
                <input type={'range'} min={0} max={1} step={0.01} style={{width: '100%'}} value={variations.pdj}
                       onInput={e => setVariations({...variations, pdj: Number(e.currentTarget.value)})}/>
            </div>
        </div>
    )
}