You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
carbon/components/LoginButton.js

107 lines
2.6 KiB
JavaScript

import React from 'react'
import Link from 'next/link'
import firebase, { logout, loginGitHub } from '../lib/client'
import Button from './Button'
import Popout, { managePopout } from './Popout'
import { useAuth } from './AuthContext'
function Drawer(props) {
return (
<Popout hidden={!props.isVisible} pointerRight="14px" style={{ width: '160px', right: 0 }}>
<div className="flex column">
<Link href="/snippets">
<Button large center padding="0.5rem 0" style={{ borderBottom: '1px solid' }}>
<img src="/static/svg/snippets.svg" alt="Snippets page" width="16px" /> Snippets{' '}
</Button>
</Link>
<Link href="/account">
<Button large center padding="0.5rem 0" style={{ borderBottom: '1px solid' }}>
<img
src="/static/svg/person.svg"
alt="Account"
width="16px"
style={{ left: '-2px', marginRight: 'calc(1rem - 3px)' }}
/>{' '}
Account
</Button>
</Link>
<Button large center padding="0.5rem 0" onClick={logout}>
Sign Out
</Button>
</div>
<style jsx>
{`
.column {
flex-direction: column;
}
img {
position: relative;
margin-right: 1rem;
}
`}
</style>
</Popout>
)
}
function LoginButton({ isVisible, toggleVisibility }) {
const user = useAuth()
if (!firebase) {
return null
}
return (
<div>
<Button
center
border
large
padding="0 16px"
color="white"
className="profile-button"
onClick={() => {
if (!user) {
loginGitHub()
} else {
toggleVisibility()
}
}}
>
<img
height={20}
src={user ? user.photoURL : '/static/svg/github.svg'}
alt={user ? user.displayName : 'GitHub'}
/>
<span>{user ? user.displayName : 'Sign in/up'}</span>
</Button>
<Drawer isVisible={user && isVisible} />
<style jsx>
{`
div,
div :global(.profile-button) {
position: relative;
height: 100%;
}
div :global(.profile-button) {
max-width: 218px;
min-height: 40px;
}
span {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
img {
border-radius: 50%;
margin-right: 16px;
}
`}
</style>
</div>
)
}
export default managePopout(LoginButton)