Create clock component

app/components/Clock.tsx

@@ -1,6 +1,45 @@
+import { useEffect, useState } from "react"
+
 function Clock() {
-    return(
-        <div>clock</div>
+    //const [today, setToday] = useState(new Date())
+    const [today, setToday] = useState(0)
+    console.log(today);
+    console.log("le type est" ,typeof today);
+
+
+    // useEffect(() => {
+    //     console.log("test into useEffect");
+
+    //     const timer = setTimeout(() => {
+    //       console.log('This will run after 3 second!')
+    //     }, 3000);
+    //     return () => clearTimeout(timer);
+    //   }, []);
+
+    function refreshClock() {
+      setToday(new Date())
+    }
+
+    useEffect (() => {
+      console.log("test into useEffect");
+      // const timerId = setInterval(refreshClock, 1000)
+      // return function cleanup() {
+      //   clearInterval(timerId)
+      // }
+    }, [today])
+    console.log(useEffect)
+
+    // let hour = today.getHours()
+    // let minute = today.getMinutes()
+    // let seconde = today.getSeconds()
+
+    return (
+        //<div>{hour}:{minute}:{seconde}</div>
+        <div>
+          <button onClick={()=> {setToday(1)}}>push</button>
+          <h1>{today}</h1>
+        </div>
+
     )
 
 }

app/components/Header.tsx

@@ -1,3 +1,5 @@
+import Clock from "./Clock"
+
 function Header(props: { name: string }) {
 
     const { name } = props
@@ -11,6 +13,9 @@ function Header(props: { name: string }) {
                         : (<p>error no name</p>)
                 }
             </div>
+            <div className="header-clock">
+                <Clock />
+            </div>
         </header>
     )
 }

app/styles/smartdisplay.css

@@ -21,8 +21,9 @@ header {
     line-height: 6rem;
 }
 
-.header-agency{
+.header-clock{
     font-size: 4rem;
+    font-weight: bold;
 }
 
 .departure-row{