WIP profiles

components/user-header.js

@@ -10,6 +10,9 @@ import { gql, useApolloClient, useMutation } from '@apollo/client'
 import styles from './user-header.module.css'
 import { useMe } from './me'
 import { NAME_MUTATION, NAME_QUERY } from '../fragments/users'
+import Image from 'next/image'
+import QRCode from 'qrcode.react'
+import LightningIcon from '../svgs/bolt.svg'
 
 export default function UserHeader ({ user }) {
   const [editting, setEditting] = useState(false)
@@ -19,7 +22,7 @@ export default function UserHeader ({ user }) {
   const [setName] = useMutation(NAME_MUTATION)
 
   const isMe = me?.name === user.name
-  const Satistics = () => <h1 className='mb-0'><small className='text-success'>{isMe ? `${user.sats} sats \\ ` : ''}{user.stacked} stacked</small></h1>
+  const Satistics = () => <div className={`mb-4 ${styles.username} text-success`}>{isMe ? `${user.sats} sats \\ ` : ''}{user.stacked} stacked</div>
 
   const UserSchema = Yup.object({
     name: Yup.string()
@@ -39,7 +42,12 @@ export default function UserHeader ({ user }) {
 
   return (
     <>
-      <div>
+      <div className='d-flex align-items-center mt-2 flex-wrap'>
+        <Image
+          src='/dorian400.jpg' width='200' height='166' layout='fixed'
+          className={styles.userimg}
+        />
+        <div className='ml-3'>
           {editting
             ? (
               <Form
@@ -77,12 +85,12 @@ export default function UserHeader ({ user }) {
                   setEditting(false)
                 }}
               >
-              <div className='d-flex align-items-center'>
+                <div className='d-flex align-items-center mb-1'>
                   <Input
                     prepend=<InputGroup.Text>@</InputGroup.Text>
                     name='name'
                     autoFocus
-                  groupClassName={`mb-0 ${styles.username}`}
+                    groupClassName={styles.usernameForm}
                     showValid
                   />
                   <SubmitButton variant='link' onClick={() => setEditting(true)}>save</SubmitButton>
@@ -90,13 +98,22 @@ export default function UserHeader ({ user }) {
               </Form>
               )
             : (
-            <div className='d-flex align-items-center'>
-              <h2 className='mb-0'>@{user.name}</h2>
+              <div className='d-flex align-items-center mb-1'>
+                <div className={styles.username}>@{user.name}</div>
                 {isMe &&
-                <Button variant='link' onClick={() => setEditting(true)}>edit nym</Button>}
+                  <Button className='py-0' variant='link' onClick={() => setEditting(true)}>edit nym</Button>}
               </div>
               )}
           <Satistics user={user} />
+          <Button className='font-weight-bold'>
+            <LightningIcon
+              width={20}
+              height={20}
+              className='mr-1'
+            />{user.name}@stacker.news
+          </Button>
+        </div>
+        <QRCode className='ml-auto' value='fdsajfkldsajlkfjdlksajfkldjsalkjfdklsa' renderAs='svg' size={166} />
       </div>
       <Nav
         className={styles.nav}

components/user-header.module.css

@@ -1,5 +1,6 @@
-.username {
+.usernameForm {
     width: 300px;
+    margin-bottom: 0;
 }
 
 .nav {
@@ -14,3 +15,14 @@
 .nav div:last-child a {
     padding-right: 0;
 }
+
+.userimg {
+    clip-path: polygon(0% 0%, 83% 0%, 100% 100%, 17% 100%);
+    object-fit: cover;
+}
+
+.username {
+    font-weight: bold;
+    font-size: 150%;
+    line-height: 1.25rem;
+}