From 0a2065fbbd68696e83760e41698481ed0e393f49 Mon Sep 17 00:00:00 2001
From: fre-ben <fschocke@gmail.com>
Date: Sat, 13 Feb 2021 21:32:17 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=89=20Add=20header=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .storybook/preview-head.html            |  4 ++++
 src/components/header/header.css        |  0
 src/components/header/header.stories.ts | 10 ++++++++++
 src/components/header/header.ts         |  8 ++++++++
 4 files changed, 22 insertions(+)
 create mode 100644 src/components/header/header.css
 create mode 100644 src/components/header/header.stories.ts
 create mode 100644 src/components/header/header.ts

diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
index 7c3a79e..53b1e79 100644
--- a/.storybook/preview-head.html
+++ b/.storybook/preview-head.html
@@ -1 +1,5 @@
 <!-- https://storybook.js.org/docs/configurations/add-custom-head-tags/#docs-content -->
+<script
+  src="https://kit.fontawesome.com/d1f1f68cc2.js"
+  crossorigin="anonymous"
+></script>
diff --git a/src/components/header/header.css b/src/components/header/header.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/header/header.stories.ts b/src/components/header/header.stories.ts
new file mode 100644
index 0000000..30e97f3
--- /dev/null
+++ b/src/components/header/header.stories.ts
@@ -0,0 +1,10 @@
+import "./header.css";
+import { displayHeader } from "./header";
+import { createElement } from "../../utils/createElement";
+
+export default {
+  title: "Components/Header",
+  parameters: { layout: "centered" },
+};
+
+export const header = () => displayHeader();
diff --git a/src/components/header/header.ts b/src/components/header/header.ts
new file mode 100644
index 0000000..d703dc6
--- /dev/null
+++ b/src/components/header/header.ts
@@ -0,0 +1,8 @@
+import { createElement } from "../../utils/createElement";
+
+export function displayHeader() {
+  return createElement("h1", {
+    className: "header",
+    innerHTML: `CATLINEZ <i class="fas fa-paw"></i> <i class="far fa-newspaper"></i>`,
+  });
+}