From 8e5b414ccec705fc355aa0488b6b868f83c6a350 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Sat, 26 Feb 2022 17:46:05 -0800
Subject: [PATCH] Created ProfileHeader component

---
 components/ProfileHeader/index.scss | 32 +++++++++++++++++++++++++++++
 components/ProfileHeader/index.tsx  | 28 +++++++++++++++++++++++++
 2 files changed, 60 insertions(+)
 create mode 100644 components/ProfileHeader/index.scss
 create mode 100644 components/ProfileHeader/index.tsx

diff --git a/components/ProfileHeader/index.scss b/components/ProfileHeader/index.scss
new file mode 100644
index 00000000..12cce3fc
--- /dev/null
+++ b/components/ProfileHeader/index.scss
@@ -0,0 +1,32 @@
+#ProfileHeader {
+    align-items: center;
+    background: white;
+    border-radius: $unit;
+    display: flex;
+    margin: 0 auto;
+    margin-bottom: $unit * 5;
+    max-width: $unit * 52;
+    padding: ($unit * 3) ($unit * 5);
+
+    h1 {
+        font-size: $font-xxlarge;
+        font-weight: $normal;
+        flex-grow: 1;
+        text-align: left;
+    }
+
+    img {
+        $diameter: 120px;
+        border-radius: $diameter / 2;
+        height: $diameter;
+        width: $diameter;
+
+        &.gran {
+            background-color: #CEE7FE;
+        }
+
+        &.djeeta {
+            background-color: #FFE1FE;
+        }
+    }
+}
\ No newline at end of file
diff --git a/components/ProfileHeader/index.tsx b/components/ProfileHeader/index.tsx
new file mode 100644
index 00000000..87af714f
--- /dev/null
+++ b/components/ProfileHeader/index.tsx
@@ -0,0 +1,28 @@
+import React, { useState } from 'react'
+import { useSnapshot } from 'valtio'
+
+import { appState } from '~utils/appState'
+
+import './index.scss'
+
+// Props
+interface Props {
+    username: string
+    gender: boolean
+}
+
+const ProfileHeader = (props: Props) => {
+    return (
+        <section id="ProfileHeader">
+            <h1>{props.username}</h1>
+            <img 
+                alt="Gran"
+                className="gran"
+                srcSet="/profile/gran.png,
+                        /profile/gran@2x.png 2x"
+                src="/profile/gran.png" />
+        </section>
+    )
+}
+
+export default ProfileHeader
\ No newline at end of file