Created ProfileHeader component

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;
+        }
+    }
+}

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