manifold/web/pages/account.tsx
Austin Chen 8867d841cb
Austin's opinions on theming (#6)
* Run prettier

* Fix package-lock

* Use an off-white background, darker text

* Use indigo for headings instead of green

* Add box shadows to all cards

* Remove unused component

* Extract out a title component

* Fix typo
2021-12-10 19:35:21 -08:00

56 lines
1.8 KiB
TypeScript

import { useRouter } from 'next/router'
import { firebaseLogout } from '../lib/firebase/users'
import { Header } from '../components/header'
import { useUser } from '../hooks/use-user'
import { useState, useEffect } from 'react'
import { Contract, listContracts } from '../lib/firebase/contracts'
import { ContractsList } from '../components/contracts-list'
import { Title } from '../components/title'
export default function Account() {
const user = useUser()
const router = useRouter()
const [contracts, setContracts] = useState<Contract[]>([])
useEffect(() => {
if (user?.id) {
listContracts(user?.id).then(setContracts)
}
}, [user?.id])
return (
<div>
<Header />
<div className="max-w-4xl py-8 mx-auto">
<div>
<div className="card glass lg:card-side text-neutral-content bg-green-600 hover:bg-green-600 transition-all max-w-sm mx-auto my-12">
<figure className="p-6">
{user?.avatarUrl && (
<img src={user.avatarUrl} className="rounded-lg shadow-lg" />
)}
</figure>
<div className="max-w-md card-body">
<h2 className="card-title font-major-mono">{user?.name}</h2>
<p>{user?.email}</p>
<p>${user?.balanceUsd} USD</p>
<div className="card-actions">
<button
className="btn glass rounded-full hover:bg-green-500"
onClick={() => {
firebaseLogout()
router.push('/')
}}
>
Sign Out
</button>
</div>
</div>
</div>
</div>
<Title text="Your markets" />
<ContractsList contracts={contracts} />
</div>
</div>
)
}