new es6 functional react component with the name of grandfatherclock. the component returns an svg clock that updated every second in typescript

index.ts
import React, { useState, useEffect } from 'react';

interface Props {
  size: number;
  color: string;
}

const GrandfatherClock: React.FC<Props> = ({ size, color }) => {
  const [time, setTime] = useState<Date>(new Date());

  useEffect(() => {
    const timerID = setInterval(() => {
      setTime(new Date());
    }, 1000);

    return () => {
      clearInterval(timerID);
    };
  }, []);

  const getAngle = (unit: 'hours' | 'minutes' | 'seconds') => {
    const angle = {
      hours: (time.getHours() % 12) * 30 + time.getMinutes() / 2,
      minutes: time.getMinutes() * 6,
      seconds: time.getSeconds() * 6
    };
    return angle[unit];
  };

  return (
    <svg viewBox="-50 -50 100 100" width={size} height={size}>
      <g>
        <circle r="45" fill="none" strokeWidth="2" stroke={color} />
        {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map(hour => (
          <line
            key={hour}
            x1="0"
            y1="-38"
            x2="0"
            y2="-42"
            stroke={color}
            strokeWidth="2"
            transform={`rotate(${hour * 30})`}
          />
        ))}
        <line
          x1="0"
          y1="0"
          x2="0"
          y2="-30"
          stroke={color}
          strokeWidth="2"
          transform={`rotate(${getAngle('hours')})`}
        />
        <line
          x1="0"
          y1="0"
          x2="0"
          y2="-42"
          stroke={color}
          strokeWidth="2"
          transform={`rotate(${getAngle('minutes')})`}
        />
        <line
          x1="0"
          y1="0"
          x2="0"
          y2="-45"
          stroke={color}
          strokeWidth="1"
          strokeOpacity="0.6"
          transform={`rotate(${getAngle('seconds')})`}
        />
      </g>
    </svg>
  );
};

export default GrandfatherClock;
1815 chars
80 lines