open.source/manifold
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Show "M$20" on hover, hide arrows when closed

Browse Source
This commit is contained in:
Austin Chen 2022-05-21 19:52:50 -07:00
parent 1adfb874c3
commit f3092892d8
1 changed files with 62 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

103
web/components/contract/contract-card.tsx
View File

@ -1,7 +1,11 @@
import clsx from 'clsx' import clsx from 'clsx'
import Link from 'next/link' import Link from 'next/link'
import { Row } from '../layout/row' import { Row } from '../layout/row'
import { formatLargeNumber, formatPercent } from 'common/util/format' import {
formatLargeNumber,
formatMoney,
formatPercent,
} from 'common/util/format'
import { import {
Contract, Contract,
contractPath, contractPath,
@ -87,17 +91,18 @@ export function ContractCard(props: {
const prob = getProb(contract) const prob = getProb(contract)
const color = getColor(contract) const color = getColor(contract)
const marketClosed = (contract.closeTime || Infinity) < Date.now()
return ( return (
<div> <div>
<Col <Col
className={clsx( className={clsx(
'relative gap-3 rounded-lg bg-white py-4 pl-6 pr-5 shadow-md hover:cursor-pointer', 'relative gap-3 rounded-lg bg-white py-4 pl-6 pr-5 shadow-md hover:cursor-pointer hover:bg-gray-100',
className className
)} )}
> >
<Row className="justify-between divide-x"> <Row>
<Col className="relative gap-3 pr-1"> <Col className="relative flex-1 gap-3 pr-1">
<AvatarDetails contract={contract} /> <AvatarDetails contract={contract} />
<p <p
className="break-words font-medium text-indigo-700" className="break-words font-medium text-indigo-700"
@ -119,29 +124,41 @@ export function ContractCard(props: {
showCloseTime={showCloseTime} showCloseTime={showCloseTime}
/> />
<Link href={contractPath(contract)}> <Link href={contractPath(contract)}>
<a className="absolute -left-6 right-0 -top-4 -bottom-4 rounded-l-lg hover:bg-gray-400 hover:bg-opacity-10" /> {/* Note: Extends bg but not click target on closed markets */}
<a
className={clsx(
'absolute -left-6 -top-4 -bottom-4',
marketClosed ? 'right-[-6rem]' : 'right-0'
)}
/>
</Link> </Link>
</Col> </Col>
<Col className="relative -my-4 -mr-5 min-w-[6rem] justify-center gap-2 pr-5 pl-3 align-middle"> <Col className="relative -my-4 -mr-5 min-w-[6rem] justify-center gap-2 pr-5 pl-3 align-middle">
<div className="mt-4"> {!marketClosed && (
<div <div>
className="peer absolute top-0 left-0 right-0 h-[50%] rounded-tr-lg hover:bg-gray-400 hover:bg-opacity-10" <div
onClick={() => { className="peer absolute top-0 left-0 right-0 h-[50%]"
// console.log('e', e) onClick={() => {
}} console.log('success')
></div> }}
{contract.createdTime % 3 == 0 ? ( ></div>
<TriangleFillIcon <div className="my-1 text-center text-xs text-transparent peer-hover:text-gray-400">
className={clsx( {formatMoney(20)}
'mx-auto h-5 w-5 text-opacity-60 peer-hover:text-opacity-100', </div>
`text-${color}`
)} {contract.createdTime % 3 == 0 ? (
/> <TriangleFillIcon
) : ( className={clsx(
<TriangleFillIcon className="mx-auto h-5 w-5 text-gray-200 peer-hover:text-gray-400" /> 'mx-auto h-5 w-5 text-opacity-60 peer-hover:text-opacity-100',
)} `text-${color}`
</div> )}
/>
) : (
<TriangleFillIcon className="mx-auto h-5 w-5 text-gray-200 peer-hover:text-gray-400" />
)}
</div>
)}
{outcomeType === 'BINARY' && ( {outcomeType === 'BINARY' && (
<BinaryResolutionOrChance <BinaryResolutionOrChance
@ -165,24 +182,28 @@ export function ContractCard(props: {
/> />
)} )}
<div className="mb-4"> {!marketClosed && (
<div <div>
className="peer absolute bottom-0 left-0 right-0 h-[50%] rounded-br-lg hover:bg-gray-400 hover:bg-opacity-10" <div
onClick={() => { className="peer absolute bottom-0 left-0 right-0 h-[50%]"
// console.log('e2', e) onClick={() => {
}} }}
></div> ></div>
{contract.createdTime % 3 == 2 ? ( {contract.createdTime % 3 == 2 ? (
<TriangleDownFillIcon <TriangleDownFillIcon
className={clsx( className={clsx(
'mx-auto h-5 w-5 text-opacity-60 peer-hover:text-opacity-100', 'mx-auto h-5 w-5 text-opacity-60 peer-hover:text-opacity-100',
`text-${color}` `text-${color}`
)} )}
/> />
) : ( ) : (
<TriangleDownFillIcon className="mx-auto h-5 w-5 text-gray-200 peer-hover:text-gray-400" /> <TriangleDownFillIcon className="mx-auto h-5 w-5 text-gray-200 peer-hover:text-gray-400" />
)} )}
</div> <div className="my-1 text-center text-xs text-transparent peer-hover:text-gray-400">
{formatMoney(20)}
</div>
</div>
)}
</Col> </Col>
</Row> </Row>