Expand option for daily movers

This commit is contained in:
James Grugett 2022-09-07 21:51:34 -05:00
parent 3c808bcb8d
commit 66fa073d05

View File

@ -3,20 +3,22 @@ import { contractPath } from 'web/lib/firebase/contracts'
import { CPMMContract } from 'common/contract' import { CPMMContract } from 'common/contract'
import { formatPercent } from 'common/util/format' import { formatPercent } from 'common/util/format'
import { useProbChanges } from 'web/hooks/use-prob-changes' 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 { Col } from '../layout/col'
import { Row } from '../layout/row' import { Row } from '../layout/row'
import { useState } from 'react'
export function ProbChangeTable(props: { userId: string | undefined }) { export function ProbChangeTable(props: { userId: string | undefined }) {
const { userId } = props const { userId } = props
const changes = useProbChanges(userId ?? '') const changes = useProbChanges(userId ?? '')
const [expanded, setExpanded] = useState(false)
if (!changes) { if (!changes) {
return null return null
} }
const count = 4 const count = expanded ? 16 : 4
const { positiveChanges, negativeChanges } = changes const { positiveChanges, negativeChanges } = changes
const filteredPositiveChanges = positiveChanges.slice(0, count / 2) const filteredPositiveChanges = positiveChanges.slice(0, count / 2)
@ -27,40 +29,48 @@ export function ProbChangeTable(props: { userId: string | undefined }) {
] ]
return ( return (
<Row className="mb-4 w-full flex-wrap divide-x-2 rounded bg-white shadow-md"> <Col>
<Col className="min-w-[300px] flex-1 divide-y"> <Col className="mb-4 w-full divide-x-2 divide-y rounded bg-white shadow-md md:flex-row md:divide-y-0">
{filteredChanges.slice(0, count / 2).map((contract) => ( <Col className="flex-1 divide-y">
<Row className="items-center hover:bg-gray-100"> {filteredChanges.slice(0, count / 2).map((contract) => (
<ProbChange <Row className="items-center hover:bg-gray-100">
className="p-4 text-right text-xl" <ProbChange
contract={contract} className="p-4 text-right text-xl"
/> contract={contract}
<SiteLink />
className="p-4 pl-2 font-semibold text-indigo-700" <SiteLink
href={contractPath(contract)} className="p-4 pl-2 font-semibold text-indigo-700"
> href={contractPath(contract)}
<span className="line-clamp-2">{contract.question}</span> >
</SiteLink> <span className="line-clamp-2">{contract.question}</span>
</Row> </SiteLink>
))} </Row>
))}
</Col>
<Col className="flex-1 divide-y">
{filteredChanges.slice(count / 2).map((contract) => (
<Row className="items-center hover:bg-gray-100">
<ProbChange
className="p-4 text-right text-xl"
contract={contract}
/>
<SiteLink
className="p-4 pl-2 font-semibold text-indigo-700"
href={contractPath(contract)}
>
<span className="line-clamp-2">{contract.question}</span>
</SiteLink>
</Row>
))}
</Col>
</Col> </Col>
<Col className="justify-content-stretch min-w-[300px] flex-1 divide-y"> <div
{filteredChanges.slice(count / 2).map((contract) => ( className={clsx(linkClass, 'cursor-pointer self-end')}
<Row className="items-center hover:bg-gray-100"> onClick={() => setExpanded(!expanded)}
<ProbChange >
className="p-4 text-right text-xl" {expanded ? 'Show less' : 'Show more'}
contract={contract} </div>
/> </Col>
<SiteLink
className="p-4 pl-2 font-semibold text-indigo-700"
href={contractPath(contract)}
>
<span className="line-clamp-2">{contract.question}</span>
</SiteLink>
</Row>
))}
</Col>
</Row>
) )
} }