Made home page and startet the layout for settings home page

PointOfSale/Pos.Web/Components/Pages/Settings/Employees.razor

@@ -0,0 +1,21 @@
+@page "/settings/employees"
+@rendermode InteractiveServer
+
+
+<h1>Medarbejder</h1>
+
+<FluentButton Appearance="@ButtonAppearance.Primary"
+              OnClick="@CreateEmployee">
+    Opret medarbejder
+</FluentButton>
+
+<p>@_message</p>
+
+@code {
+    private string _message = "";
+
+    public void CreateEmployee()
+    {
+        _message = "Medarbejder blev oprettet";
+    }
+}

PointOfSale/Pos.Web/Components/Pages/Settings/Settings.razor

@@ -0,0 +1,54 @@
+@using System.Globalization
+@rendermode InteractiveServer
+@implements IDisposable
+@page "/settings"
+
+<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>
+
+<p>Administer data, der bruges i kassesalget</p>
+<div class="home-container">
+    <FluentButton Class="menu-button" Size="ButtonSize.Large">
+        Medarbejder
+    </FluentButton>
+    <FluentButton Class="menu-button" Size="ButtonSize.Large">
+        Vare
+    </FluentButton>
+</div>
+
+
+
+@code {
+    private readonly CultureInfo _danishCulture =
+        CultureInfo.GetCultureInfo("da-DK");
+
+    private readonly Timer _timer;
+    private DateTime _currentTime = DateTime.Now;
+
+    public Settings()
+    {
+        _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/Pages/Settings/Settings.razor.css

@@ -0,0 +1,24 @@
+/* CSS for Settings 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;
+}