- added current time

- added start and end date
- removed additional sections
- fixed X button
- renamed + and - buttons
- some renaming

src/pages/Timers/Timers.tsx

@@ -1,11 +1,30 @@
+import { useEffect, useState } from 'react';
 import Timer from '../../components/Timer/Timer';
 import styles from './Timers.module.css';
 
 const Timers = () => {
+    const [time, setTime] = useState(new Date());
+
+    useEffect(() => {
+        const intervalId = setInterval(() => {
+            setTime(new Date());
+        }, 500);
+
+        return () => clearInterval(intervalId);
+    }, [])
+
+    const formatTime = (date: Date) => {
+        const hours = String(date.getHours()).padStart(2, '0');
+        const minutes = String(date.getMinutes()).padStart(2, '0');
+        const seconds = String(date.getSeconds()).padStart(2, '0');
+        return `${hours}:${minutes}:${seconds}`;
+      };
+
     return (
         <div className={styles.content}>
-            <header>
-                <a className={`${styles.header_text} ${styles.title}`}>ГринТаймер</a>
+            <header className={styles.header}>
+                <a className={`${styles.header_text} ${styles.title}`}>MetaTimer</a>
+                <a className={`${styles.header_text} ${styles.title}`}>{formatTime(time)}</a>
             </header>
             <div className={styles.timers_container}>
                 <Timer/>
@@ -13,16 +32,6 @@ const Timers = () => {
                 <Timer/>
                 <Timer/>
             </div>
-            <div className={styles.notes_container}>
-                <a className={`${styles.title} ${styles.notes_text}`}>Заметки</a>
-                <textarea></textarea>
-            </div>
-            <footer>
-                <a className={`${styles.title} ${styles.notes_text}`}>Респекты</a>
-                <a>Лиза +вайбик за макет</a>
-                <a>Слава сигма за всё остальное</a>
-                <a>Игорь красава с нами рядом сидел</a>
-            </footer>
         </div>
     )
 }