Addet employee frontend and move header to a componet

PointOfSale/Pos.Web/Components/Shared/Header.razor

@@ -0,0 +1,12 @@
+@rendermode InteractiveServer
+@implements IDisposable
+
+<header class="top-nav">
+    <div class="brand">Blomster POS</div>
+
+    <time datetime="@_currentTime.ToString("O")">
+        @_currentTime.ToString(
+            "dddd d. MMMM yyyy · HH:mm",
+            _danishCulture)
+    </time>
+</header>

PointOfSale/Pos.Web/Components/Shared/Header.razor.cs

@@ -0,0 +1,33 @@
+using System.Globalization;
+
+namespace Pos.Web.Components.Shared
+{
+    public partial class Header
+    {
+        private readonly CultureInfo _danishCulture =
+        CultureInfo.GetCultureInfo("da-DK");
+
+        private readonly Timer _timer;
+        private DateTime _currentTime = DateTime.Now;
+
+        public Header()
+        {
+            _timer = new Timer(
+                UpdateTime,
+                null,
+                TimeSpan.FromMinutes(1),
+                TimeSpan.FromMinutes(1));
+        }
+
+        private void UpdateTime(object? state)
+        {
+            _currentTime = DateTime.Now;
+            _ = InvokeAsync(StateHasChanged);
+        }
+
+        public void Dispose()
+        {
+            _timer.Dispose();
+        }
+    }
+}

PointOfSale/Pos.Web/Components/Shared/Header.razor.css

@@ -0,0 +1,24 @@
+/* CSS for Header component */
+.top-nav {
+    min-height: 72px;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 24px;
+    padding: 0 32px;
+    background: var(--colorNeutralBackground1);
+    border-bottom: 1px solid var(--colorNeutralStroke2);
+}
+
+.brand {
+    color: var(--colorNeutralForeground1);
+    font-size: 26px;
+    font-weight: 600;
+}
+
+time {
+    color: var(--colorNeutralForeground2);
+    font-size: 18px;
+    white-space: nowrap;
+}