meke smal changes

src/App.tsx

@@ -4,8 +4,8 @@ import s from './App.module.css';
 import Spoiler from './components/Spoiler/Spoiler';
 import RangeInput from './components/RangeInput/RangeInput';
 import PasswordConfirm from './components/PasswordConfirm/PasswordConfirm';
-
 import TimerContainer from './components/TimerContainer/TimerContainer';
+import TimerPresentation from './components/TimerPresentation/TimerPresentation';
 interface ISecondsTimerProps {
   seconds: number;
 }
@@ -25,6 +25,7 @@ function App() {
         refresh={100}
         renderEl={SecondsTimer}
       />
+      <TimerPresentation />
       <ToastContainer
         position="top-right"
         autoClose={3000}

src/components/TimerContainer/Timer/Timer.tsx

@@ -5,7 +5,7 @@ import s from './Timer.module.css';
 interface TimerProps {
   time: number;
   flag: string;
-  handleTimer: () => void;
+  setFlag: React.Dispatch<React.SetStateAction<string>>;
   refresh: number;
   renderEl: ({ seconds }: { seconds: number }) => JSX.Element;
 }
@@ -13,7 +13,7 @@ interface TimerProps {
 const Timer = ({
   time,
   flag,
-  handleTimer,
+  setFlag,
   refresh,
   renderEl: RenderEl,
 }: TimerProps) => {
@@ -29,6 +29,19 @@ const Timer = ({
       setTimeout(() => setTimeLeft(timeLeft - 1), refresh);
   }, [timeLeft, refresh, flag]);
 
+  const handleTimer = () => {
+    switch (flag) {
+      case 'Start':
+        setFlag('Pause');
+        break;
+      case 'Pause':
+        setFlag('Start');
+        break;
+      default:
+        break;
+    }
+  };
+
   return (
     <div className={s.timerWrapper}>
       <button className={s.timerBtn} onClick={handleTimer}>

src/components/TimerContainer/TimerContainer.module.css

@@ -3,5 +3,4 @@
   flex-direction: column;
   align-items: center;
   align-content: center;
-  padding-bottom: 40px;
 }

src/components/TimerContainer/TimerContainer.tsx

@@ -1,17 +1,43 @@
+import { useState } from 'react';
+
 import s from './TimerContainer.module.css';
 import TimerControl from './TimerControl/TimerControl';
-import TimerPresentation from './TimerPresentation/TimerPresentation';
+import Timer from './Timer/Timer';
 
 interface ITimerContainerProps {
   amountSeconds: number;
   refresh: number;
   renderEl: ({ seconds }: { seconds: number }) => JSX.Element;
 }
-const TimerContainer = (props: ITimerContainerProps) => {
+const TimerContainer = ({
+  amountSeconds,
+  refresh,
+  renderEl,
+}: ITimerContainerProps) => {
+  const [flag, setFlag] = useState<string>('Start');
+  const [hours, setHours] = useState<number>(0);
+  const [minutes, setMinutes] = useState<number>(0);
+  const [seconds, setSeconds] = useState<number>(0);
+
+  const time = (hours * 60 + minutes) * 60 + seconds;
   return (
     <div className={s.timerContainerWrapper}>
-      <TimerControl {...props} />
-      <TimerPresentation />
+      <Timer
+        time={time > 0 ? time : amountSeconds}
+        flag={flag}
+        setFlag={setFlag}
+        refresh={refresh}
+        renderEl={renderEl}
+      />
+      <p>
+        H:{hours}M:{minutes}S:{seconds}
+      </p>
+      <TimerControl
+        flag={flag}
+        setHours={setHours}
+        setMinutes={setMinutes}
+        setSeconds={setSeconds}
+      />
     </div>
   );
 };

src/components/TimerContainer/TimerControl/TimerControl.tsx

@@ -1,37 +1,20 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 
 import s from './TimerControl.module.css';
-import Timer from '../Timer/Timer';
 
 interface ITimerControlProps {
-  amountSeconds: number;
-  refresh: number;
-  renderEl: ({ seconds }: { seconds: number }) => JSX.Element;
+  flag: string;
+  setHours: React.Dispatch<React.SetStateAction<number>>;
+  setMinutes: React.Dispatch<React.SetStateAction<number>>;
+  setSeconds: React.Dispatch<React.SetStateAction<number>>;
 }
 
 const TimerControl = ({
-  amountSeconds,
-  refresh,
-  renderEl,
+  flag,
+  setHours,
+  setMinutes,
+  setSeconds,
 }: ITimerControlProps) => {
-  const [flag, setFlag] = useState<string>('Start');
-  const [hours, setHours] = useState<number>(0);
-  const [minutes, setMinutes] = useState<number>(0);
-  const [seconds, setSeconds] = useState<number>(0);
-
-  const handleTimer = () => {
-    switch (flag) {
-      case 'Start':
-        setFlag('Pause');
-        break;
-      case 'Pause':
-        setFlag('Start');
-        break;
-      default:
-        break;
-    }
-  };
-
   const handleTimeInput = (e: React.ChangeEvent<HTMLInputElement>) => {
     const name = e.target.name;
     const value = Number(e.target.value);
@@ -50,7 +33,6 @@ const TimerControl = ({
         break;
     }
   };
-  const time = (hours * 60 + minutes) * 60 + seconds;
 
   return (
     <div className={s.timerControlWrapper}>
@@ -75,16 +57,6 @@ const TimerControl = ({
         type="number"
         placeholder="Seconds"
       ></input>
-      <p>
-        Hours : {hours} . Minutes : {minutes} .Seconds : {seconds}
-      </p>
-      <Timer
-        time={time > 0 ? time : amountSeconds}
-        flag={flag}
-        handleTimer={handleTimer}
-        refresh={refresh}
-        renderEl={renderEl}
-      />
     </div>
   );
 };

src/components/TimerContainer/TimerPresentation/TimerPresentation.module.css

@@ -1,4 +1,5 @@
 .clock {
+  margin: 0 auto;
   width: 300px;
   height: 300px;
   background-color: rgba(255, 255, 255, 0.8);