# slider-blocks/2.11.0/src/controls/switcher-control/index.js

GutSlider – All in One Slider and Carousel Blocks for Gutenberg, version 2.11.0. 48 lines.

- Page: https://pluginprobe.com/plugins/slider-blocks/2.11.0/code/src/controls/switcher-control/index.js
- Raw: https://pluginprobe.com/plugins/slider-blocks/2.11.0/raw/src/controls/switcher-control/index.js
- Modified: 2026-02-21T13:53:58+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/slider-blocks/2.11.0/code/src/controls/switcher-control/index.js#L10-L20`.

```javascript
/**
 * WordPress dependencies
 */
import { __ } from '@wordpress/i18n';
import { useState } from '@wordpress/element';
import { ButtonGroup, Button } from '@wordpress/components';

const tabOptions = [
    {
        label: __('Normal', 'slider-blocks'),
        value: 'normal'
    },
    {
        label: __('Hover', 'slider-blocks'),
        value: 'hover'
    }
];
const SwitcherControl = ({ normal, hover, options = [] }) => {
    const [tab, setTab] = useState('normal');

    const Tabs = options.length > 0 ? options : tabOptions;

    return (
        <div className="gkits-control-container gkits-switcher gkits-mb-24">
            <ButtonGroup>
                {Tabs &&
                    Tabs.map((item, index) => {
                        return (
                            <Button
                                key={index}
                                className={`switcher-button ${tab === item.value ? 'gkits-active' : ''}`}
                                onClick={() => setTab(item.value)}
                            >
                                {item.label}
                            </Button>
                        );
                    })}
            </ButtonGroup>
            <div className="gkits-switcher-content">
                {tab === 'normal' && <div className="gkits-normal-content">{normal}</div>}
                {tab === 'hover' && <div className="gkits-hover-content">{hover}</div>}
            </div>
        </div>
    );
};

export default SwitcherControl;

```