44 lines
1.4 KiB
TypeScript
44 lines
1.4 KiB
TypeScript
import clsx from 'clsx'
|
|
import { Contract } from 'common/contract'
|
|
import Link from 'next/link'
|
|
import { contractPath, getBinaryProbPercent } from 'web/lib/firebase/contracts'
|
|
import { BinaryContractOutcomeLabel } from '../outcome-label'
|
|
import { getColor } from './quick-bet'
|
|
|
|
export function ContractMention(props: { contract: Contract }) {
|
|
const { contract } = props
|
|
const { outcomeType, resolution } = contract
|
|
const probTextColor = `text-${getColor(contract)}`
|
|
|
|
return (
|
|
<Link href={contractPath(contract)}>
|
|
<a
|
|
className="group inline whitespace-nowrap rounded-sm hover:bg-indigo-50 focus:bg-indigo-50"
|
|
title={outcomeType}
|
|
>
|
|
<span className="break-anywhere mr-0.5 whitespace-normal font-normal text-indigo-700">
|
|
{contract.question}
|
|
</span>
|
|
{outcomeType === 'BINARY' && (
|
|
<span
|
|
className={clsx(
|
|
probTextColor,
|
|
'rounded-full px-1 font-semibold ring-1 ring-inset ring-indigo-100 group-hover:ring-0'
|
|
)}
|
|
>
|
|
{resolution ? (
|
|
<BinaryContractOutcomeLabel
|
|
contract={contract}
|
|
resolution={resolution}
|
|
/>
|
|
) : (
|
|
getBinaryProbPercent(contract)
|
|
)}
|
|
</span>
|
|
)}
|
|
{/* TODO: numeric? */}
|
|
</a>
|
|
</Link>
|
|
)
|
|
}
|