import { start } from "@thi.ng/hdom/start" ; import { getInUnsafe } from "@thi.ng/paths/get-in" ; import { setInUnsafe } from "@thi.ng/paths/set-in" ; interface ButtonAttribs { id : string ; onclick ? : EventListener ; } const button = ( ctx , attribs , label , tooltip ) => { let local = getInUnsafe ( ctx . __local , attribs . id ) ; if ( ! local ) { ctx . __local = setInUnsafe ( ctx . __local , attribs . id , ( local = { tooltip : false } ) ) ; } return [ "a.dib.w4.pa2.mr3.white.bg-blue.hover-black.hover-bg-yellow.bg-animate" , { onclick : attribs . onclick , onmouseenter : ( ) => ( local . tooltip = true ) , onmouseleave : ( ) => ( local . tooltip = false ) , } , local . tooltip ? tooltip : label , ] ; } ; const APP = [ "div.ma3.sans-serif" , [ button , { id : "button.help" } , "Help" , "Whazzup?!" ] , [ button , { id : "button.logout" } , "Logout" , "See ya!" ] , ] ; start ( APP , { ctx : { __local : { } } } ) ;