Expand option for daily movers
This commit is contained in:
parent
3c808bcb8d
commit
66fa073d05
|
@ -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>
|
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue
Block a user