- added current time

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

src/pages/Timers/Timers.module.css

@@ -5,6 +5,12 @@ body, html {
     font-family: 'Montserrat', serif;
 }
 
+.header {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+}
+
 .content {
     padding: 32px;
     display: flex;
@@ -30,34 +36,4 @@ body, html {
     justify-content: space-between;
     flex-wrap: wrap;
     gap: 16px;
-}
-
-.notes_container {
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
-    background-color: #FFFFFF;
-    border-radius: 32px;
-    padding: 32px;
-    height: 400px;
-}
-
-.notes_container textarea {
-    height: 100%;
-    border: 1px dashed #000;
-    resize: none;
-    font-size: 40px;
-}
-
-footer {
-    display: flex;
-    background-color: #FFF;
-    border-radius: 32px;
-    flex-direction: column;
-    padding: 32px;
-    color: #000;
-}
-
-footer a {
-    font-size: 24px;
 }

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>
     )
 }