manifold/web/components/manaboard.tsx
2022-03-31 12:14:29 -07:00

115 lines
3.4 KiB
TypeScript

import clsx from 'clsx'
import { useState } from 'react'
import { ENV_CONFIG } from '../../common/envs/constants'
import { User } from '../../common/user'
import { useUser } from '../hooks/use-user'
import { AmountInput } from './amount-input'
import { Avatar } from './avatar'
import { Col } from './layout/col'
import { Modal } from './layout/modal'
import { Row } from './layout/row'
import { SiteLink } from './site-link'
import { Title } from './title'
export function Manaboard(props: {
title: string
users: User[]
className?: string
}) {
// TODO: Ideally, highlight your own entry on the leaderboard
const { title, users, className } = props
return (
<div className={clsx('w-full px-1', className)}>
<Title text={title} className="!mt-0" />
{users.length === 0 ? (
<div className="ml-2 text-gray-500">None yet</div>
) : (
<div className="overflow-x-auto">
<table className="table-zebra table-compact table w-full text-gray-500">
<thead>
<tr className="p-2">
<th>#</th>
<th>Name</th>
<th></th>
</tr>
</thead>
<tbody>
{users.map((user, index) => (
<tr key={user.id}>
<td>{index + 1}</td>
<td style={{ maxWidth: 190 }}>
<Row className="items-center gap-4">
<Avatar avatarUrl={user.avatarUrl} size={8} />
<div className="truncate">{user.name}</div>
</Row>
</td>
<td>
<BuySlotModal
slot={index + 1}
title={`${title}`}
holder={user}
/>
</td>
</tr>
))}
</tbody>
</table>
</div>
)}
</div>
)
}
export function BuySlotModal(props: {
title: string
holder: User
slot: number
}) {
const { slot, title, holder } = props
const user = useUser()
const [open, setOpen] = useState(false)
return (
<>
<Modal open={open} setOpen={setOpen}>
<Col className="gap-4 rounded-md bg-white p-6 text-gray-500">
<Title
text={`Buy #${slot} on ${title}`}
className="!mt-0 !text-2xl"
/>
<div className="text-sm">Currently</div>
<Row className="items-center gap-4 rounded-md bg-gray-100 p-2">
<div>#{slot}</div>
<Avatar avatarUrl={holder.avatarUrl} size={8} />
<div className="truncate">{holder.name}</div>
</Row>
<div className="text-sm">After purchasing</div>
{user && (
<Row className="items-center gap-4 rounded-md bg-gray-100 p-2">
<div>#{slot}</div>
<Avatar avatarUrl={user.avatarUrl} size={8} />
<div className="truncate">{user.name}</div>
</Row>
)}
<div className="text-sm">Assess value</div>
<AmountInput
amount={100}
onChange={() => {}}
error={''}
// error="You don't have enough mana"
label={ENV_CONFIG.moneyMoniker}
/>
<button className="btn btn-primary">Buy Slot</button>
</Col>
</Modal>
<button className="btn btn-outline btn-sm" onClick={() => setOpen(true)}>
Buy
</button>
</>
)
}