A SVG clock with hour hands

lil-clock.tsx

interface ClockProps {
  time: Date;
  size?: number;
  abbr?: string;
}

export function Clock({ time, size = 14, abbr }: ClockProps): JSX.Element {
  const hour = time.getHours() % 12;
  const minute = time.getMinutes();
  const hourAngle = (hour + minute / 60) * 30;

  return (
    <div>
      <svg
        width={size}
        height={size}
        viewBox='-50 -50 100 100'>
        <circle r={45} fill='none' stroke='black' strokeWidth={7} style={{ pointerEvents: 'none' }} />
        <line
          x1={0}
          y1={0}
          x2={0}
          y2={-43.5}
          stroke='black'
          strokeWidth={7}
          style={{
            pointerEvents: 'none',
            transform: `rotate(${hourAngle}deg)`,
            transformOrigin: '0 0',
          }}
        />
      </svg>
      {abbr && (
        <span>
          {abbr}
        </span>
      )}
    </div>
  );
}