humus-old/client/ui/menu/world-time.js

// 3rd party.
import React, {useEffect, useState} from 'react';
// 2nd party.
import {compose} from '@avocado/core';
import contempo from 'contempo';
// 1st party.
import {WorldTime} from '../../../common/world-time';

const decorate = compose(
  contempo(`
.time {
  background-color: rgba(0, 0, 0, .3);
  border: 0.5px solid gray;
  border-radius: 50px;
  color: white;
  position: absolute;
  top: 5px;
  right: 5px;
  line-height: 1em;
  padding: 0.5em;
  font-family: monospace;
  font-size: 0.5em;
  text-shadow: 0.5px 0.5px 0px black;
}
  `),
);

const WorldTimeComponent = ({worldTime}) => {
  const [time, setTime] = useState('--:-- --');
  useEffect(() => {
    const updater = () => {
      setTime(WorldTime.format(worldTime.hour));
    };
    worldTime.ticker.on('tick', updater);
    return () => {
      worldTime.ticker.off('tick', updater);
    };
  }, []);
  return <div className="time unselectable">{time}</div>;
}

export default decorate(WorldTimeComponent);