40 lines
1.1 KiB
TypeScript
40 lines
1.1 KiB
TypeScript
import React from 'react'
|
|
import cx from 'classnames'
|
|
import { User, Market } from '../../../context'
|
|
import styles from './Indicator.module.scss'
|
|
|
|
const Indicator = ({
|
|
className,
|
|
togglePopover,
|
|
forwardedRef
|
|
}: {
|
|
className?: string
|
|
togglePopover: () => void
|
|
forwardedRef: (ref: HTMLElement | null) => void
|
|
}) => (
|
|
<div
|
|
className={cx(styles.status, className)}
|
|
onMouseOver={togglePopover}
|
|
onMouseOut={togglePopover}
|
|
ref={forwardedRef}
|
|
>
|
|
<User.Consumer>
|
|
{(user) => (
|
|
<Market.Consumer>
|
|
{(market) =>
|
|
!user.isLogged || !market.networkMatch ? (
|
|
<span
|
|
className={styles.statusIndicatorCloseEnough}
|
|
/>
|
|
) : user.isLogged ? (
|
|
<span className={styles.statusIndicatorActive} />
|
|
) : null
|
|
}
|
|
</Market.Consumer>
|
|
)}
|
|
</User.Consumer>
|
|
</div>
|
|
)
|
|
|
|
export default Indicator
|