Function CameraControls

src/components/CameraControls.js:32–251

(onChange)

};

export function CameraControls(onChange) {
    const container = document.createElement('div');
    // Added padding-bottom to ensure scrollbar doesn't overlap content if visible
    // Changed justify-center to justify-start md:justify-center to allow left-aligned scrolling on mobile
    container.className = 'w-full flex justify-start md:justify-center gap-3 md:gap-6 py-4 md:py-8 overflow-x-auto no-scrollbar snap-x px-4 md:px-0';

    let state = {
        camera: Object.keys(CAMERA_MAP)[0],
        lens: Object.keys(LENS_MAP)[0],
        focal: 35,
        aperture: "f/1.4"
    };

    const updateState = (key, value) => {
        state[key] = value;
        if (onChange) onChange(state);
    };

    const createColumn = (title, items, key, initialValue) => {
        const colWrapper = document.createElement('div');
        colWrapper.className = 'flex flex-col items-center relative w-[140px] md:w-[160px] shrink-0 snap-center group';

        const viewport = document.createElement('div');
        // Responsive height: h-[50vh] on mobile, h-[320px] on desktop
        viewport.className = 'relative overflow-hidden w-full h-[40vh] md:h-[320px] bg-[#1a1a1a]/80 rounded-[2rem] border border-white/5 shadow-2xl backdrop-blur-xl transition-transform duration-300 hover:scale-[1.02] hover:border-white/10';

        const list = document.createElement('div');
        list.className = 'h-full overflow-y-auto no-scrollbar snap-y snap-mandatory relative z-10';

        // Spacer to allow first item to be centered
        const topSpacer = document.createElement('div');
        topSpacer.style.height = 'calc(50% - 50px)'; // Half viewport - half item height
        list.appendChild(topSpacer);

        const topMask = document.createElement('div');
        topMask.className = 'absolute top-0 left-0 right-0 h-24 bg-gradient-to-b from-[#1a1a1a] via-[#1a1a1a]/80 to-transparent z-20 pointer-events-none rounded-t-[2rem]';
        viewport.appendChild(topMask);

        const bottomMask = document.createElement('div');
        bottomMask.className = 'absolute bottom-0 left-0 right-0 h-24 bg-gradient-to-t from-[#1a1a1a] via-[#1a1a1a]/80 to-transparent z-20 pointer-events-none rounded-b-[2rem]';
        viewport.appendChild(bottomMask);

        const glow = document.createElement('div');
        glow.className = 'absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-4/5 h-[80px] bg-primary/5 blur-xl rounded-full pointer-events-none z-0';
        viewport.appendChild(glow);

        // DRAG TO SCROLL LOGIC
        let isDown = false;
        let startY;
        let scrollTop;

        list.addEventListener('mousedown', (e) => {
            isDown = true;
            list.classList.add('cursor-grabbing');
            list.classList.remove('cursor-pointer', 'snap-y'); // Disable snap while dragging
            startY = e.pageY - list.offsetTop;
            scrollTop = list.scrollTop;
            e.preventDefault(); // Prevent text selection