Front-end met Snowpack toegevoegd

3 files changed, 50 insertions, 0 deletions

diff --git a/client/src/Header/Header.css b/client/src/Header/Header.css
new file mode 100644
index 0000000..6744f32
--- /dev/null
+++ b/client/src/Header/Header.css
@@ -0,0 +1,30 @@
+.main-header {
+    background-color: white;
+    color: green;
+    font-size: 2rem;
+    margin-bottom: 8px;
+}
+
+.main-navigation {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    background-color: green;
+    font-size: 1.3rem;
+    height: 45px;
+}
+
+.main-navigation a {
+    color: white;
+    text-decoration: none;
+}
+
+.main-header div {
+    display: flex;
+    align-items: center;
+}
+
+.main-header img {
+    height: 50px;
+    margin: 6px;
+}
\ No newline at end of file
diff --git a/client/src/Header/Header.tsx b/client/src/Header/Header.tsx
new file mode 100644
index 0000000..9f96d0c
--- /dev/null
+++ b/client/src/Header/Header.tsx
@@ -0,0 +1,20 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import "./Header.css";
+import urlLogo from "./logo.jpg";
+
+/**
+ * A Header component with a Sogyo logo, the name of the application and several links to different pages
+ */
+export function Header() {
+    return <header className="main-header">
+        <div>
+            <img src={urlLogo} /> 
+            Mancala
+        </div>
+        <div className="main-navigation">
+            <Link to="/">Play</Link>
+            <Link to="/about">About</Link>
+        </div>
+    </header>
+}
\ No newline at end of file
diff --git a/client/src/Header/logo.jpg b/client/src/Header/logo.jpg
new file mode 100644
index 0000000..9104922
--- /dev/null
+++ b/client/src/Header/logo.jpg