Bviveksingh

{difficultyLevel === undefined && <DifficultyLevel setDifficultyLevel={setDifficulty}/>}

Bviveksingh

const setTime = (seconds: number) => {
   setTimeInSeconds(seconds);
}

Bviveksingh

const endTimerFunc = () => {
  setStartTimer(false);
  setEndTimer(true);
}

Bviveksingh

const [startTimer, setStartTimer] = useState<boolean>(false);

Bviveksingh

{timeInSeconds as number > 0 ? <Timer timeInSeconds={timeInSeconds as number} startTimer={startTimer} endTimerFunc={endTimerFunc}/> : <Duration setTimeInSeconds={setTime}/>}

Bviveksingh

import React, { FC } from 'react';

type difficultyLevelType = 0 | 1 | 2;

interface DifficultyLevelProps{
    setDifficultyLevel: (value: difficultyLevelType) => void;
}


const DifficultyLevel : FC<DifficultyLevelProps> = ({

Bviveksingh

import React, { FC } from 'react';

type timeInSecondsType = 60 | 120 | 180;

interface DurationProps{
    setTimeInSeconds: (value: timeInSecondsType) => void;
}

const Duration : FC<DurationProps> = ({
    setTimeInSeconds

Bviveksingh

import React, { ChangeEvent, FC } from 'react'


interface InputBoxProps{
    value: string | undefined;
    onChange: (e:ChangeEvent<HTMLInputElement>) => void;
}

const InputBox : FC<InputBoxProps> = ({
    value,

Bviveksingh

import React, { FC } from 'react';
import styles from './paragraph.module.css';

interface ParagraphProps{
    value: any;
}

const Paragraph : FC<ParagraphProps> = ({
    value
}) => {

Bviveksingh

return (
   <div>
     {startTimer ? readableFormat : 'Timer is set, type to trigger timer'} 
   </div>
)