feat(board): added clock to board (#1102)

* feat(board): created clock component and added it as an optional parameter to header

* fix(board): right shifted the clock in board view

* fix(board): fixed css for right shifted clock

* fix(clock): changed heading type for the clock

* fix(board): removed unnecessary styling in header

* fix(clock): added oslo timezone to the clock

* chore(board): move clock component to shared

* fix(header): removed unused css classes

next-tavla/pages/[id].tsx

@@ -33,7 +33,7 @@ function BoardPage({ settings }: { settings: TSettings }) {
     return (
         <div className={classes.root} data-theme={settings.theme || 'dark'}>
             <div className={classes.rootContainer}>
-                <Header theme={settings.theme} />
+                <Header theme={settings.theme} showClock={true} />
                 <Board settings={settings} />
             </div>
         </div>

next-tavla/src/Shared/components/Clock/index.tsx

@@ -0,0 +1,19 @@
+import { useEffect, useState } from 'react'
+
+function Clock() {
+    const [currentTime, setCurrentTime] = useState(Date.now())
+
+    useEffect(() => {
+        const intervalId = setInterval(() => setCurrentTime(Date.now()), 1000)
+        return () => clearInterval(intervalId)
+    }, [])
+
+    const time = new Intl.DateTimeFormat('no-NB', {
+        timeStyle: 'short',
+        timeZone: 'Europe/Oslo',
+    }).format(currentTime)
+
+    return <span>{time}</span>
+}
+
+export { Clock }

next-tavla/src/Shared/components/Header/index.tsx

@@ -3,30 +3,34 @@ import TavlaLogoLight from 'assets/logos/Tavla-blue.svg'
 import Image from 'next/image'
 import classes from './styles.module.css'
 import { TTheme } from 'types/settings'
+import { Clock } from 'components/Clock'
 
-function Header({ theme }: { theme?: TTheme }) {
+function Header({ theme, showClock }: { theme?: TTheme; showClock?: boolean }) {
     return (
-        <div>
-            {theme === 'light' ? (
-                <Image
-                    src={TavlaLogoLight}
-                    alt="Entur Tavla logo"
-                    width={117}
-                    height={20}
-                    className={classes.logo}
-                />
-            ) : (
-                <Image
-                    src={TavlaLogo}
-                    alt="Entur Tavla logo"
-                    width={117}
-                    height={20}
-                    className={classes.logo}
-                />
-            )}
-            <p className={classes.tagText}>
-                Finn din rute på entur.no eller i Entur-appen
-            </p>
+        <div className={classes.headerWrapper}>
+            <div>
+                {theme === 'light' ? (
+                    <Image
+                        src={TavlaLogoLight}
+                        alt="Entur Tavla logo"
+                        width={117}
+                        height={20}
+                        className={classes.logo}
+                    />
+                ) : (
+                    <Image
+                        src={TavlaLogo}
+                        alt="Entur Tavla logo"
+                        width={117}
+                        height={20}
+                        className={classes.logo}
+                    />
+                )}
+                <p className={classes.tagText}>
+                    Finn din rute på entur.no eller i Entur-appen
+                </p>
+            </div>
+            {showClock && <Clock />}
         </div>
     )
 }

next-tavla/src/Shared/components/Header/styles.module.css

@@ -6,4 +6,12 @@
 .tagText {
     font-size: 0.5em;
     color: var(--main-text-color);
+    margin: 0;
+}
+
+.headerWrapper {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
 }