From f382ec567e1292cedee7c01e721ddc38bdc4dc4e Mon Sep 17 00:00:00 2001
From: "SOGYO\\bvdoord" <bvdoord@sogyo.nl>
Date: Tue, 26 Jan 2021 11:22:58 +0100
Subject: Front-end met Snowpack toegevoegd

---
 client/src/Header/Header.css |  30 ++++++++++++++++++++++++++++++
 client/src/Header/Header.tsx |  20 ++++++++++++++++++++
 client/src/Header/logo.jpg   | Bin 0 -> 5184 bytes
 3 files changed, 50 insertions(+)
 create mode 100644 client/src/Header/Header.css
 create mode 100644 client/src/Header/Header.tsx
 create mode 100644 client/src/Header/logo.jpg

(limited to 'client/src/Header')

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
Binary files /dev/null and b/client/src/Header/logo.jpg differ
-- 
cgit v1.2.3