Generated by XState Viz: https://xstate.js.org/viz

machine.js

const inicioStates = {
	id: 'inicio',
	type: 'parallel',
	states: {
		menuOpciones: {
			initial: 'idle',
			states: {
				idle: {
					on: {
						CLICK_INICIO_MENUOPCIONES_IDLE: 'active'
					},
					meta: {
						image: 'inicio_menuOpciones_idle.png',
						title: 'Menu de opciones',
						description: 'desc Menu de opciones',
						coordinates: [0, 40, 480, 265],
					},
				},
				active: {
					on: {
						CLICK_INICIO_MENUOPCIONES_ACTIVE: 'idle'
					},
					meta: {
						image: 'inicio_menuOpciones_active.png',
						title: 'Menu de opciones ACTIVE',
						description: 'desc Menu de opciones ACTIVE',
						coordinates: [0, 40, 480, 265],
					},
				},
			},
		},
		textoBuscar: {
			initial: 'idle',
			states: {
				idle: {
					meta: {
						title: "Cuadro de búsqueda",
						description: "Acá es posible buscar avisos en Yapo",
						coordinates: [0, 40, 480, 265],
						image: 'textoBuscar_idle.png',
					},
				},
			},
		},
		highligths: {
			initial: "idle",
			states: {
				idle: {},
				highligth_menuOpciones_idle: {
					meta: {
						title: 'Menu de opciones',
						description: 'desc Menu de opciones',
						coordinates: [0, 40, 480, 265],
					},
				},
				highligth_menuOpciones_active: {
					meta: {
						title: 'Menu de opciones active',
						description: 'desc Menu de opciones active',
						coordinates: [0, 40, 480, 265],
					},
				},
				highligth_textoBuscar_idle: {
					meta: {
						title: "Cuadro de búsqueda",
						description: "Acá es posible buscar avisos en Yapo",
						coordinates: [0, 40, 480, 265],
					},
				},
			},
			on: {
				HIGHLIGTH_MENUOPCIONES_IDLE: ".highligth_menuOpciones_idle",
				HIGHLIGTH_MENUOPCIONES_ACTIVE: ".highligth_menuOpciones_active",
				HIGHLIGTH_TEXTOBUSCAR_IDLE: ".highligth_textoBuscar_idle",
			},
		}
	}
};

const yapoMachine = Machine({
	key: 'app',
	initial: 'inicio',
	states: {
		inicio: {
			on: {
				CLICK_INICIO_TEXTBUSCAR_IDLE: 'buscar'
			},
			meta: {
				image: "inicio.png",
			},
			...inicioStates,
		},
		buscar: {
			on: {
				
			},
			meta: {
				image: "inicio.png",
			},
		},
	},
});