import React , { useContext } from 'react' ; import { Flex , Box } from '@stacks/ui' ; import { StacksLogo } from '@stacks/ui' ; import { AppContext } from '@common/context' ; import { Link } from '@components/link' ; interface HeaderProps { signOut : ( ) => void ; } export const Header = ( { signOut } ) => { const state = useContext ( AppContext ) ; return ( < Flex as = "nav" justifyContent = "space-between" alignItems = "center" height = "64px" px = { 6 } > < Box verticalAlign = "center" > < StacksLogo color = "black" maxHeight = "26px" display = "inline-block" ml = "-10px" / > < /Box> { state . userData ? ( < Box > < Link display = "inline-block" ml = { 2 } textStyle = "caption.medium" color = "blue" onClick = { ( ) => { signOut ( ) ; } } > Sign out < /Link> < /Box>) : null} < /Flex>); } ;