import { Switch } from '@headlessui/react';
import { memo } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { classNames } from '../helpers';
const ToggleSwitch = ( { onChange, value, variant = 'dark' } ) => {
const switchClassNames = {
dark: {
wrapper: [
'w-10',
value ? 'bg-accent-st' : 'bg-zip-dark-theme-border',
],
background: [ value ? 'bg-accent-st' : 'bg-zip-dark-theme-border' ],
switch: [ 'size-5', value ? 'translate-x-5' : 'translate-x-0' ],
},
light: {
wrapper: [ 'w-9', value ? 'bg-accent-st' : 'bg-border-tertiary' ],
background: [ value ? 'bg-accent-st' : 'bg-border-tertiary' ],
switch: [
'size-4',
value ? 'translate-x-[1.15rem]' : 'translate-x-[0.15rem]',
],
},
};
return (
{ __( 'Use setting', 'ai-builder' ) }
);
};
export default memo( ToggleSwitch );
.elementor-tab-title a{color:inherit}.elementor-accordion{text-align:start}.elementor-accordion .elementor-accordion-item{border:1px solid #d5d8dc}.elementor-accordion .elementor-accordion-item+.elementor-accordion-item{border-block-start:none}.elementor-accordion .elementor-tab-title{cursor:pointer;font-weight:700;line-height:1;margin:0;outline:none;padding:15px 20px}.elementor-accordion .elementor-tab-title .elementor-accordion-icon{display:inline-block;width:1.5em}.elementor-accordion .elementor-tab-title .elementor-accordion-icon svg{height:1em;width:1em}.elementor-accordion .elementor-tab-title .elementor-accordion-icon.elementor-accordion-icon-right{float:right;text-align:right}.elementor-accordion .elementor-tab-title .elementor-accordion-icon.elementor-accordion-icon-left{float:left;text-align:left}.elementor-accordion .elementor-tab-title .elementor-accordion-icon .elementor-accordion-icon-closed{display:block}.elementor-accordion .elementor-tab-title .elementor-accordion-icon .elementor-accordion-icon-opened,.elementor-accordion .elementor-tab-title.elementor-active .elementor-accordion-icon-closed{display:none}.elementor-accordion .elementor-tab-title.elementor-active .elementor-accordion-icon-opened{display:block}.elementor-accordion .elementor-tab-content{border-block-start:1px solid #d5d8dc;display:none;padding:15px 20px}@media (max-width:767px){.elementor-accordion .elementor-tab-title{padding:12px 15px}.elementor-accordion .elementor-tab-title .elementor-accordion-icon{width:1.2em}.elementor-accordion .elementor-tab-content{padding:7px 15px}}.e-con-inner>.elementor-widget-accordion,.e-con>.elementor-widget-accordion{width:var(--container-widget-width);--flex-grow:var( --container-widget-flex-grow )}
Ekim 2024 – Etossimo