Responsive Control

index.js

import { dispatch, useSelect } from '@wordpress/data';

const devices = [
    {
        name: 'Desktop',
        icon: 'desktop'
    },
    {
        name: 'Tablet',
        icon: 'tablet'
    },
    {
        name: 'Mobile',
        icon: 'smartphone'
    }
];

import './style.scss';

const ResponsiveControl = ({ label, children }) => {
    // Use useSelect hook to subscribe to device type changes
    const deviceType = useSelect(select => {
        return select('core/editor').getDeviceType();
    }, []);

    return (
        <div className="gtcx-control responsive-control">
            <div className="gtcx-responsive-control">
                <div className="gtcx-responsive-label">{label}</div>
                <div className="gtcx-responsive-value">
                    <div className="gtcx-responsive-device-selector">
                        {devices.map(device => (
                            <button
                                key={device.name}
                                className={`gtcx-responsive-device-button ${deviceType === device.name ? 'active' : ''}`}
                                onClick={() => {
                                    dispatch('core/editor').setDeviceType(device.name);
                                }}
                                title={`${device.name} View`}
                            >
                                <span className={`dashicons dashicons-${device.icon}`}></span>
                            </button>
                        ))}
                    </div>
                </div>
            </div>
            <div className="gtcx-responsive-control-content">{children}</div>
        </div>
    );
};

export default ResponsiveControl;

preview.txt

see result: https://www.loom.com/share/86db5dd7a7834cafb9a05ade308e17a8?sid=42dd4f73-c154-484f-9ec7-45ec6d69b1fb

style.scss

.gtcx-responsive-control {
    display: flex;
    align-items: center;
    gap: 8px;
}

.gtcx-responsive-label {
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 500;
}

.gtcx-responsive-device-selector {
    display: inline-flex;
    gap: 4px;
}

button.gtcx-responsive-device-button {
    margin: 0;
    padding: 0;
    border: none;
    background: none;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    line-height: 1;
    color: #999;
    &.active {
        color: #000;
    }
}

button.gtcx-responsive-device-button span {
    display: inline-block;
    height: 15px;
    width: 15px;
    font-size: 14px;
}

button.gtcx-responsive-device-button span::before {
    font-size: 14px;
}

usecase.js

 <ResponsiveControl label={__('Height', 'text-domain')}>
        <RangeControl
            value={}
            onChange={v => .... }
            min={10}
            max={500}
        />
    </ResponsiveControl>