import { faCircle } from '@fortawesome/free-solid-svg-icons' import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' import React, { useState } from 'react' import { Overlay, Tooltip } from 'react-bootstrap' import { useTranslation } from 'react-i18next' import { CategoryType } from '../types' import { useUpdateIndicatorViewModel } from './update-indicator.viewmodel' interface UpdateIndicatorProps { category: CategoryType updateInterval: number } const UpdateIndicator: React.FC<UpdateIndicatorProps> = ({ category, updateInterval }) => { const [showTooltip, setShowTooltip] = useState(false) const { t } = useTranslation('common') const target = React.useRef(null) const { secondsSinceUpdate, getStatusColor } = useUpdateIndicatorViewModel(category) return ( <div className="position-absolute" style={{ top: 0, right: '40px', padding: '10px', zIndex: 10 }} > <div ref={target} onMouseEnter={() => setShowTooltip(true)} onMouseLeave={() => setShowTooltip(false)} style={{ cursor: 'pointer' }} > <FontAwesomeIcon icon={faCircle} className={getStatusColor(updateInterval)} size="sm" /> </div> <Overlay target={target.current} show={showTooltip} placement="bottom"> <Tooltip id="update-tooltip"> {t('device.box.lastUpdate', { seconds: secondsSinceUpdate })} </Tooltip> </Overlay> </div> ) } export default UpdateIndicator