start home page and settings

2024-07-19 23:45:07 +02:00
parent 5da13eace5
commit eaaf4b813c
13 changed files with 349 additions and 301 deletions
@@ -0,0 +1,48 @@
+import "./homePage.css";
+
+import * as React from "bloatless-react";
+
+import { translations } from "./translations";
+
+export function HomePage() {
+  return (
+    <article id="home-page">
+      <header>
+        <span>{translations.homePage.appName}</span>
+      </header>
+      <div>
+        <div id="overview-section">
+          <h2>{translations.homePage.overviewHeadline}</h2>
+
+          <div class="tile flex-no">
+            <span class="icon">cell_tower</span>
+            <div>
+              <h3>{translations.homePage.statusHeadline}</h3>
+            </div>
+          </div>
+          <button class="tile flex-no">
+            <span class="icon">settings</span>
+            <div>{translations.homePage.settingsButton}</div>
+          </button>
+        </div>
+
+        <div id="chat-section">
+          <h2>{translations.homePage.chatsHeadline}</h2>
+
+          <div class="flex-row width-input">
+            <input
+              placeholder={translations.homePage.addChatPlaceholder}
+              aria-label={translations.homePage.addChatAudioLabel}
+            ></input>
+            <button
+              class="primary"
+              aria-label={translations.homePage.addChatButton}
+            >
+              <span class="icon">add</span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </article>
+  );
+}