diff --git a/web/components/contract/prob-change-table.tsx b/web/components/contract/prob-change-table.tsx index af76b45a..5d585343 100644 --- a/web/components/contract/prob-change-table.tsx +++ b/web/components/contract/prob-change-table.tsx @@ -3,20 +3,22 @@ import { contractPath } from 'web/lib/firebase/contracts' import { CPMMContract } from 'common/contract' import { formatPercent } from 'common/util/format' import { useProbChanges } from 'web/hooks/use-prob-changes' -import { SiteLink } from '../site-link' +import { linkClass, SiteLink } from '../site-link' import { Col } from '../layout/col' import { Row } from '../layout/row' +import { useState } from 'react' export function ProbChangeTable(props: { userId: string | undefined }) { const { userId } = props const changes = useProbChanges(userId ?? '') + const [expanded, setExpanded] = useState(false) if (!changes) { return null } - const count = 4 + const count = expanded ? 16 : 4 const { positiveChanges, negativeChanges } = changes const filteredPositiveChanges = positiveChanges.slice(0, count / 2) @@ -27,40 +29,48 @@ export function ProbChangeTable(props: { userId: string | undefined }) { ] return ( - - - {filteredChanges.slice(0, count / 2).map((contract) => ( - - - - {contract.question} - - - ))} + + + + {filteredChanges.slice(0, count / 2).map((contract) => ( + + + + {contract.question} + + + ))} + + + {filteredChanges.slice(count / 2).map((contract) => ( + + + + {contract.question} + + + ))} + - - {filteredChanges.slice(count / 2).map((contract) => ( - - - - {contract.question} - - - ))} - - +
setExpanded(!expanded)} + > + {expanded ? 'Show less' : 'Show more'} +
+ ) }