demountable

Back Back Up Advanced Editor

import { Tabs, Skeleton } from '@bsf/force-ui';
import { useState, useCallback } from '@wordpress/element';
import { motion } from 'framer-motion';
import { STORE_NAME } from '@AdminStore/constants';
import { useDispatch, useSuspenseSelect } from '@wordpress/data';
import SubTabToggles from './sub-tab-toggles';
import { __ } from '@wordpress/i18n';

const [ activeSocialTab, setActiveSocialTab ] = useState( 'postTypes' );
	const handleTabChange = useCallback( ( { value } ) => {
		setActiveSocialTab( value.slug );
	}, [] );

const handleSettingsChange = useCallback(
		( key, value ) => {
			setMetaSetting( key, value ); //store in redux
		},
		[ setMetaSetting ]
	);

const handleSwitchChange = ( key, value ) => {
		const updateAndCombineData = ( setStateFunction, updatedValue ) => {
			setStateFunction( updatedValue );
			const combinedData = Array.from(
				new Set( [
					...( key === 'postTypes' ? updatedValue : postTypesData ),
					...( key === 'taxonomies' ? updatedValue : taxonomiesData ),
					...( key === 'archives' ? updatedValue : archivesData ),
				] )
			);

// Store in Redux with filtered data
			handleSettingsChange( 'no_follow', combinedData );
		};

// Update the state based on the key
		switch ( key ) {
			case 'postTypes':
				updateAndCombineData( setPostTypesData, value );
				break;
			case 'taxonomies':
				updateAndCombineData( setTaxonomiesData, value );
				break;
			case 'archives':
				updateAndCombineData( setArchivesData, value );
				break;
			default:
				break;
		}
	};

return (
		<div className="space-y-4">
			<Tabs.Group
				activeItem={ activeSocialTab }
				variant="rounded"
				width="full"
				onChange={ handleTabChange }
				className="m-2"
			>
				{ subTabOption.map( ( { label, tabSlug } ) => (
					<Tabs.Tab key={ tabSlug } slug={ tabSlug } text={ label } />
				) ) }
			</Tabs.Group>
			<motion.div
				key={ activeSocialTab }
				initial={ { opacity: 0, x: 0 } }
				animate={ { opacity: 1, y: 0 } }
				exit={ { opacity: 0, x: -10 } }
				transition={ { duration: 0.3 } }
				className="w-full"
			>
				{ renderTabComponent() }
			</motion.div>
		</div>
	);
};
export default FollowingTab;