Extracted filter bar user info into a new component

components/filters/UserInfo/index.module.scss

@@ -0,0 +1,46 @@
+.root {
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+  flex-grow: 1;
+  gap: $unit * 1.5;
+
+  img {
+    $diameter: $unit * 6;
+    border-radius: calc($diameter / 2);
+    height: $diameter;
+    width: $diameter;
+
+    &.gran {
+      background-color: #cee7fe;
+    }
+
+    &.djeeta {
+      background-color: #ffe1fe;
+    }
+
+    &.fire {
+      background: $fire-bg-20;
+    }
+
+    &.water {
+      background: $water-bg-20;
+    }
+
+    &.wind {
+      background: $wind-bg-20;
+    }
+
+    &.earth {
+      background: $earth-bg-20;
+    }
+
+    &.dark {
+      background: $dark-bg-10;
+    }
+
+    &.light {
+      background: $light-bg-20;
+    }
+  }
+}

components/filters/UserInfo/index.tsx

@@ -0,0 +1,22 @@
+import styles from './index.module.scss'
+
+interface Props {
+  user: User
+}
+
+const UserInfo = ({ user }: Props) => {
+  return (
+    <div className={styles.root}>
+      <img
+        alt={user.avatar.picture}
+        className={styles[user.avatar.element]}
+        srcSet={`/profile/${user.avatar.picture}.png,
+                                    /profile/${user.avatar.picture}@2x.png 2x`}
+        src={`/profile/${user.avatar.picture}.png`}
+      />
+      <h1>{user.username}</h1>
+    </div>
+  )
+}
+
+export default UserInfo