From c82a07063c0661ab902146829e26c0e4ab765eb1 Mon Sep 17 00:00:00 2001
From: vildeopp <64434819+vildeopp@users.noreply.github.com>
Date: Thu, 6 Jul 2023 12:29:00 +0200
Subject: [PATCH] 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 | 2 +-
.../src/Shared/components/Clock/index.tsx | 19 ++++++++
.../src/Shared/components/Header/index.tsx | 48 ++++++++++---------
.../components/Header/styles.module.css | 8 ++++
4 files changed, 54 insertions(+), 23 deletions(-)
create mode 100644 next-tavla/src/Shared/components/Clock/index.tsx
diff --git a/next-tavla/pages/[id].tsx b/next-tavla/pages/[id].tsx
index eb9e8e66df..7b8beb3e21 100644
--- a/next-tavla/pages/[id].tsx
+++ b/next-tavla/pages/[id].tsx
@@ -33,7 +33,7 @@ function BoardPage({ settings }: { settings: TSettings }) {
return (
diff --git a/next-tavla/src/Shared/components/Clock/index.tsx b/next-tavla/src/Shared/components/Clock/index.tsx
new file mode 100644
index 0000000000..1264b66680
--- /dev/null
+++ b/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 {time}
+}
+
+export { Clock }
diff --git a/next-tavla/src/Shared/components/Header/index.tsx b/next-tavla/src/Shared/components/Header/index.tsx
index f6bcd177e8..9bc2fdfd5d 100644
--- a/next-tavla/src/Shared/components/Header/index.tsx
+++ b/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 (
-
- {theme === 'light' ? (
-
- ) : (
-
- )}
-
- Finn din rute på entur.no eller i Entur-appen
-
+
+
+ {theme === 'light' ? (
+
+ ) : (
+
+ )}
+
+ Finn din rute på entur.no eller i Entur-appen
+
+
+ {showClock &&
}
)
}
diff --git a/next-tavla/src/Shared/components/Header/styles.module.css b/next-tavla/src/Shared/components/Header/styles.module.css
index 915e8bc664..9702c9ecb8 100644
--- a/next-tavla/src/Shared/components/Header/styles.module.css
+++ b/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;
}