make clock direction in reversal way

src/App.tsx

@@ -6,12 +6,7 @@ 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;
-}
-const SecondsTimer = ({ seconds }: ISecondsTimerProps) => {
-  return <h2>{seconds}</h2>;
-};
+
 function App() {
   return (
     <div className={s.appWrapper}>
@@ -23,9 +18,8 @@ function App() {
       <TimerContainer
         amountSeconds={1800}
         refresh={100}
-        renderEl={SecondsTimer}
+        render={TimerPresentation}
       />
-      <TimerPresentation />
       <ToastContainer
         position="top-right"
         autoClose={3000}

src/components/TimerContainer/Timer/Timer.tsx

@@ -7,7 +7,7 @@ interface TimerProps {
   flag: string;
   setFlag: React.Dispatch<React.SetStateAction<string>>;
   refresh: number;
-  renderEl: ({ seconds }: { seconds: number }) => JSX.Element;
+  render: ({ seconds }: { seconds: number }) => JSX.Element;
 }
 
 const Timer = ({
@@ -15,7 +15,7 @@ const Timer = ({
   flag,
   setFlag,
   refresh,
-  renderEl: RenderEl,
+  render: TimerPresentation,
 }: TimerProps) => {
   const [timeLeft, setTimeLeft] = useState<number>(0);
 
@@ -49,7 +49,9 @@ const Timer = ({
       <button className={s.timerBtn} onClick={handleTimer}>
         {flag}
       </button>
-      <RenderEl seconds={timeLeft} />
+      <p>refresh speed {refresh} ms</p>
+      <p>{timeLeft} sec</p>
+      <TimerPresentation seconds={timeLeft} />
     </div>
   );
 };

src/components/TimerContainer/TimerContainer.module.css

@@ -3,4 +3,6 @@
   flex-direction: column;
   align-items: center;
   align-content: center;
+  color: rgb(26, 241, 7);
+  font-size: 25px;
 }

src/components/TimerContainer/TimerContainer.tsx

@@ -7,12 +7,12 @@ import Timer from './Timer/Timer';
 interface ITimerContainerProps {
   amountSeconds: number;
   refresh: number;
-  renderEl: ({ seconds }: { seconds: number }) => JSX.Element;
+  render: ({ seconds }: { seconds: number }) => JSX.Element;
 }
 const TimerContainer = ({
   amountSeconds,
   refresh,
-  renderEl,
+  render,
 }: ITimerContainerProps) => {
   const [flag, setFlag] = useState<string>('Start');
   const [hours, setHours] = useState<number>(0);
@@ -27,11 +27,8 @@ const TimerContainer = ({
         flag={flag}
         setFlag={setFlag}
         refresh={refresh}
-        renderEl={renderEl}
+        render={render}
       />
-      <p>
-        H:{hours}M:{minutes}S:{seconds}
-      </p>
       <TimerControl
         flag={flag}
         setHours={setHours}

src/components/TimerPresentation/TimerPresentation.module.css

@@ -6,6 +6,7 @@
   border-radius: 50%;
   border: 2px solid black;
   position: relative;
+  margin-bottom: 20px;
 }
 
 .clock .number {

src/components/TimerPresentation/TimerPresentation.tsx

@@ -1,8 +1,11 @@
 import React, { useEffect } from 'react';
 
 import s from './TimerPresentation.module.css';
+interface ITimerPresentationProps {
+  seconds: number;
+}
 
-const TimerPresentation = () => {
+const TimerPresentation = ({ seconds }: ITimerPresentationProps) => {
   useEffect(() => {
     function setRotation(el: HTMLDivElement, rotationRatio: number) {
       el.style.setProperty('--rotation', String(rotationRatio * 360));
@@ -17,7 +20,7 @@ const TimerPresentation = () => {
       '[data-second-hand]',
     ) as HTMLDivElement;
     function setClock() {
-      const currentDate = new Date();
+      const currentDate = new Date(seconds * 1000);
       const secondsRatio = currentDate.getSeconds() / 60;
       const minutesRatio = (secondsRatio + currentDate.getMinutes()) / 60;
       const hoursRatio = (minutesRatio + currentDate.getHours()) / 12;
@@ -28,7 +31,7 @@ const TimerPresentation = () => {
     setClock();
     const idInterval = setInterval(setClock, 1000);
     return () => clearInterval(idInterval);
-  }, []);
+  }, [seconds]);
 
   return (
     <div className={s.clock}>