manifold/web/components/contract-overview.tsx

58 lines
1.8 KiB
TypeScript
Raw Normal View History

import React from 'react'
import dayjs from 'dayjs'
import { Contract } from '../lib/firebase/contracts'
import { Col } from './layout/col'
import { Row } from './layout/row'
import { Spacer } from './layout/spacer'
import { formatWithCommas } from '../lib/util/format'
2021-12-12 22:14:52 +00:00
import { ContractProbGraph } from './contract-prob-graph'
2021-12-12 22:14:52 +00:00
export const ContractOverview = (props: {
contract: Contract
className?: string
}) => {
const { contract, className } = props
const { pot, seedAmounts, createdTime } = contract
const volume = pot.YES + pot.NO - seedAmounts.YES - seedAmounts.NO
const prob = pot.YES ** 2 / (pot.YES ** 2 + pot.NO ** 2)
const probPercent = Math.round(prob * 100) + '%'
return (
2021-12-12 22:14:52 +00:00
<Col className={className}>
2021-12-14 04:54:51 +00:00
<Col className="justify-between md:flex-row">
<Col>
<div className="text-3xl font-medium p-2">{contract.question}</div>
<Row className="flex-wrap text-sm text-gray-600">
<div className="p-2 whitespace-nowrap">
By {contract.creatorName}
</div>
<div className="py-2"></div>
<div className="p-2 whitespace-nowrap">
{dayjs(createdTime).format('MMM D')}
</div>
<div className="py-2"></div>
<div className="p-2 whitespace-nowrap">
{formatWithCommas(volume)} volume
</div>
</Row>
</Col>
<Col className="text-4xl mt-4 md:mt-2 md:ml-4 md:mr-6 text-primary items-end self-center md:self-start">
{probPercent}
<div className="text-xl">chance</div>
</Col>
2021-12-14 04:54:51 +00:00
</Col>
<Spacer h={4} />
2021-12-12 22:14:52 +00:00
<ContractProbGraph contract={contract} />
<Spacer h={12} />
2021-12-13 23:59:05 +00:00
<div className="text-gray-600 whitespace-pre-line">{contract.description}</div>
</Col>
)
}