Split Header to independent component

1 files changed, 33 insertions, 0 deletions

diff --git a/thallium-frontend/src/components/Header.tsx b/thallium-frontend/src/components/Header.tsx
new file mode 100644
index 0000000..56c940b
--- /dev/null
+++ b/thallium-frontend/src/components/Header.tsx
@@ -0,0 +1,33 @@
+import React from 'react';
+import styled from 'styled-components';
+
+const HeaderContainer = styled.header`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 2rem;
+
+  img {
+    width: 64px;
+    height: 64px;
+  }
+
+  h1 {
+    margin: 0;
+    margin-left: 1rem;
+  }
+`;
+
+
+const Header = () => {
+    return (
+        <HeaderContainer>
+            <img src="icon.svg" alt="Thallium logo" />
+            <h1>
+                Thallium
+            </h1>
+        </HeaderContainer>
+    );
+};
+
+export default Header;