Wowie a clock

components/Clock/Clock.tsx

@@ -0,0 +1,14 @@
+import React, { useEffect, useState } from 'react';
+
+export default function Clock(){
+    const date = useState(new Date());
+    useEffect(() => {
+        const timer = setInterval(() => date[1](new Date()), 1000);
+        return () => clearInterval(timer);
+    }, [date]);
+    return (
+        <div>
+            <h1>Time: {date[0].toLocaleTimeString()}</h1>
+        </div>
+    );
+}

components/Navbar/Navbar.tsx

@@ -6,6 +6,7 @@ import Link from "next/link";
 import { usePathname, useRouter } from "next/navigation";
 import { SetStateAction, useEffect, useState } from 'react';
 import { auth } from '../../firebase';
+import Clock from "components/Clock/Clock";
 
 
 const navItems = [
@@ -101,7 +102,9 @@ export default function NavBar() {
                             className="rounded-full border-2 border-blue-600"
                             alt="Profile Picture"
                         />
+
                     ) : null}
+
                 </div>
             </nav>
         </div>

pages/dashboard/index.tsx

@@ -10,15 +10,9 @@ export default function Profile() {
 
     useEffect(() => {
         onAuthStateChanged(auth, (user) => {
-            if (user) {
-                // User is signed in, see docs for a list of available properties
-                // https://firebase.google.com/docs/reference/js/firebase.User
-                const uid = user.uid;
-                // ...
-                console.log("uid", uid)
-            } else {
+            if (!user) {
                 router.push('/login')
-            }
+            } 
         });
 
     }, [router])
@@ -52,7 +46,7 @@ export default function Profile() {
                                 <span className="rounded bg-gray-300 p-1 w-fit" style={{ display: 'inline-flex', alignItems: 'center' }}>
                                     Disconnected
                                     <svg height="1em" width="1em" style={{ marginLeft: '0.3em' }}>
-                                        <circle cx="0.5em" cy="0.5em" r="0.4em" stroke="black" stroke-width="0.1em" fill="red" />
+                                        <circle cx="0.5em" cy="0.5em" r="0.4em" stroke="black" strokeWidth="0.1em" fill="red" />
                                     </svg>
                                 </span>
                             </p>
@@ -61,7 +55,7 @@ export default function Profile() {
                                 <span className="rounded bg-gray-300 p-1 w-fit" style={{ display: 'inline-flex', alignItems: 'center' }}>
                                     Disconnected
                                     <svg height="1em" width="1em" style={{ marginLeft: '0.3em' }}>
-                                        <circle cx="0.5em" cy="0.5em" r="0.4em" stroke="black" stroke-width="0.1em" fill="red" />
+                                        <circle cx="0.5em" cy="0.5em" r="0.4em" stroke="black" strokeWidth="0.1em" fill="red" />
                                     </svg>
                                 </span>
                             </p>

pages/index.tsx

@@ -12,15 +12,7 @@ export default function Web() {
   useEffect(()=>{
     onAuthStateChanged(auth, (user) => {
         if (user) {
-          // User is signed in, see docs for a list of available properties
-          // https://firebase.google.com/docs/reference/js/firebase.User
-          const uid = user.uid;
-          // ...
-          console.log("uid", uid)
         } else {
-          // User is signed out
-          // ...
-          console.log("user is logged out")
         }
       });