A Tiny Clock.js

/* @flow */

import React from 'react';

import { pure } from 'recompose';

import styles from './Clock.css';

type props = {
  time: string,
  size: number,
};

function Clock({time, size=17}: props) {
  const viewBox = [0, 0, size, size].join(' ');
  const [hours, minutes] = time.split(':').map(str => parseInt(str, 10));

  const center = size / 2;
  const radius = (size / 2) - 1;

  const hourAngle = (hours * 2 * Math.PI / 12);
  const minuteAngle = (minutes * 2 * Math.PI / 60);

  const x1 = center + (radius / 2) * Math.sin(hourAngle);
  const y1 = center - (radius / 2) * Math.cos(hourAngle);
  const x2 = center;
  const y2 = center;
  const x3 = center + (radius - 3) * Math.sin(minuteAngle);
  const y3 = center - (radius - 3) * Math.cos(minuteAngle);

  const points = `${x1},${y1} ${x2},${y2} ${x3},${y3}`;

  return (
    <svg className={styles.root} viewBox={viewBox} width={size} height={size}>
      <circle
        cx={center}
        cy={center}
        r={radius}
        strokeWidth="1"
        fill="none" />
      <polyline
        points={points}
        fill="none"
        strokeLinecap="round"
        strokeWidth="1" />
    </svg>
  );
}

export default pure(Clock);