update-indicator.layout.tsx

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