import React , { useEffect , useState } from 'react' ; import * as Styled from './Clock.styles' ; export interface Props { variant : 'smallFont' | 'middleFont' | 'largeFont' ; } function param { enum } variant returns { JSX . Element } const Clock = ( { variant } ) : JSX . Element => { const [ currentTime , setCurrentTime ] = useState < Date > ( new Date ( ) ) ; useEffect ( ( ) => { const interval = setInterval ( ( ) => { setCurrentTime ( new Date ( ) ) ; } , 1000 ) ; return ( ) => clearInterval ( interval ) ; } ) ; return ( < Styled . Time variant = { variant } > { currentTime . toLocaleTimeString ( 'en-us' , { timeStyle : 'short' , } ) } < /Styled.Time>); } ; export default Clock ;