From 45608cf2afc0f07c20b896885197d5ba357ae271 Mon Sep 17 00:00:00 2001
From: silvankammermann <56345764+silvankammermann@users.noreply.github.com>
Date: Sat, 28 Oct 2023 21:22:26 +0200
Subject: [PATCH] wip: add header

---
 frontend/src/app/components/Header/Header.js      | 13 +++++++++++++
 .../src/app/components/Header/Header.module.css   | 15 +++++++++++++++
 frontend/src/app/globals.css                      |  4 ++++
 3 files changed, 32 insertions(+)
 create mode 100644 frontend/src/app/components/Header/Header.js
 create mode 100644 frontend/src/app/components/Header/Header.module.css

diff --git a/frontend/src/app/components/Header/Header.js b/frontend/src/app/components/Header/Header.js
new file mode 100644
index 0000000..1c171c7
--- /dev/null
+++ b/frontend/src/app/components/Header/Header.js
@@ -0,0 +1,13 @@
+import styles from "./Header.module.css";
+import SettingsIcon from '@mui/icons-material/Settings';
+
+export default function Header({title}) {
+  return (
+    <header className={styles.header}>
+      <div className={styles.icons}>
+        <SettingsIcon className="fcolor--purple" />
+      </div>
+      <h1 className={styles.title}>{title}</h1>
+    </header>
+  );
+}
\ No newline at end of file
diff --git a/frontend/src/app/components/Header/Header.module.css b/frontend/src/app/components/Header/Header.module.css
new file mode 100644
index 0000000..ab781bf
--- /dev/null
+++ b/frontend/src/app/components/Header/Header.module.css
@@ -0,0 +1,15 @@
+.header {
+  display: flex;
+  justify-content: space-between;
+  background: var(--gradient_down);
+  padding: 3rem 2rem;
+}
+
+.icons {
+  display: flex;
+}
+
+.title {
+  text-transform: uppercase;
+  color: var(--color_yellow);
+}
\ No newline at end of file
diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css
index 6117d21..b56f292 100644
--- a/frontend/src/app/globals.css
+++ b/frontend/src/app/globals.css
@@ -23,6 +23,10 @@ h1, .h1 {
   line-height: 2.5rem;
 }
 
+.fcolor--purple {
+  color: var(--color_purple);
+}
+
 /*
 @media (prefers-color-scheme: dark) {
   :root {