From 4e8843ba06d6a1750e2c08ede856b9ecfcd1e463 Mon Sep 17 00:00:00 2001
From: "plebeius.eth" <mottoes_recap0u@icloud.com>
Date: Tue, 10 Oct 2023 13:12:35 +0200
Subject: [PATCH] feat(header): add account bar with username

---
 .../header/account-bar/account-bar.module.css | 36 +++++++++++++++++++
 .../header/account-bar/account-bar.tsx        | 23 ++++++++++++
 src/components/header/account-bar/index.ts    |  1 +
 src/components/header/header.tsx              |  2 ++
 4 files changed, 62 insertions(+)
 create mode 100644 src/components/header/account-bar/account-bar.module.css
 create mode 100644 src/components/header/account-bar/account-bar.tsx
 create mode 100644 src/components/header/account-bar/index.ts

diff --git a/src/components/header/account-bar/account-bar.module.css b/src/components/header/account-bar/account-bar.module.css
new file mode 100644
index 00000000..22e4f8c6
--- /dev/null
+++ b/src/components/header/account-bar/account-bar.module.css
@@ -0,0 +1,36 @@
+.header {
+  position: absolute;
+  right: 0;
+  top: 0px;
+  bottom: unset;
+  border-bottom-left-radius: 7px;
+  border-top-left-radius: 0;
+  background-color: var(--background3);
+  padding: 4px;
+  line-height: 12px;
+}
+
+.user {
+  color: var(--border2);
+
+  a {
+    text-decoration: none;
+    color: var(--text1);
+  }
+}
+
+.separator {
+ color: var(--border2);
+ margin: 0px .7ex 0px .7ex;
+ cursor: default; 
+}
+
+.preferences {
+  text-decoration: none;
+  font-weight: bold;
+  color: var(--text1);
+}
+
+.preferences:hover {
+  text-decoration: underline !important;
+}
\ No newline at end of file
diff --git a/src/components/header/account-bar/account-bar.tsx b/src/components/header/account-bar/account-bar.tsx
new file mode 100644
index 00000000..93412a4d
--- /dev/null
+++ b/src/components/header/account-bar/account-bar.tsx
@@ -0,0 +1,23 @@
+import { Link } from 'react-router-dom';
+import styles from './account-bar.module.css';
+import { useAccount } from '@plebbit/plebbit-react-hooks';
+
+const AccountBar = () => {
+  const account = useAccount();
+
+  return (
+    <div className={styles.header}>
+      <span className={styles.user}>
+        <Link to='/user' onClick={(e) => e.preventDefault()}>
+          {account?.author.shortAddress}
+        </Link>
+      </span>
+      <span className={styles.separator}>|</span>
+      <Link to='/settings' className={styles.preferences} onClick={(e) => e.preventDefault()}>
+        preferences
+      </Link>
+    </div>
+  );
+};
+
+export default AccountBar;
diff --git a/src/components/header/account-bar/index.ts b/src/components/header/account-bar/index.ts
new file mode 100644
index 00000000..e6e34285
--- /dev/null
+++ b/src/components/header/account-bar/index.ts
@@ -0,0 +1 @@
+export {default} from './account-bar';
\ No newline at end of file
diff --git a/src/components/header/header.tsx b/src/components/header/header.tsx
index b87ba569..380ffc27 100644
--- a/src/components/header/header.tsx
+++ b/src/components/header/header.tsx
@@ -2,6 +2,7 @@ import { useState, useEffect } from 'react';
 import { Link, useParams } from 'react-router-dom';
 import styles from './header.module.css';
 import useTheme from '../../hooks/use-theme';
+import AccountBar from './account-bar';
 
 const Header = () => {
   const { sortType } = useParams<{ sortType: string }>();
@@ -48,6 +49,7 @@ const Header = () => {
         </span>
         &nbsp;
       </div>
+      <AccountBar />
     </div>
   );
 };