import React from 'react' ; import { useAnalyticsContext } from '@every-analytics/react-analytics-provider' ; import navigate from '../router/navigate' ; const NavBar = ( ) => { const analytics = useAnalyticsContext ( ) ; return ( < header className = "App-header" > < NavItem href = "/" onClick = { ( ) => { analytics . onEvent ( 'Click logo' ) ; } } > Fruit Store < /NavItem> < NavItem href = "/products?color=red" onClick = { ( ) => { analytics . onEvent ( 'Click products' , { color : 'red' } ) ; } } > Red < /NavItem> < NavItem href = "/products?color=yellow" onClick = { ( ) => { analytics . onEvent ( 'Click products' , { color : 'yellow' } ) ; } } > Yellow < /NavItem> < NavItem href = "/login" onClick = { ( ) => { analytics . onClick ( 'Click login' , { color : 'yellow' } ) ; } } > Login < /NavItem> < NavItem href = "/set-currency" onClick = { ( ) => { analytics . onSet ( { currency : 'KRW' } ) ; } } > Currency < /NavItem> < NavItem href = "/mypage" > MyPage < /NavItem> < /header>); } ; const NavItem = ( { href , children , onClick , } ) => { const handleClick = ( e ) => { navigate . push ( href ) ; onClick ?. ( e ) ; } ; return < button onClick = { handleClick } > { children } < /button>; } ; export default NavBar ;