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 ( +
+ + e.preventDefault()}> + {account?.author.shortAddress} + + + | + e.preventDefault()}> + preferences + +
+ ); +}; + +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 = () => {   + ); };