open.source/manifold
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Expand option for daily movers

Browse Source
This commit is contained in:
James Grugett 2022-09-07 21:51:34 -05:00
parent 3c808bcb8d
commit 66fa073d05
1 changed files with 45 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
web/components/contract/prob-change-table.tsx
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,8 +29,9 @@ 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">
<Col className="flex-1 divide-y">
{filteredChanges.slice(0, count / 2).map((contract) => ( {filteredChanges.slice(0, count / 2).map((contract) => (
<Row className="items-center hover:bg-gray-100"> <Row className="items-center hover:bg-gray-100">
<ProbChange <ProbChange
@ -44,7 +47,7 @@ export function ProbChangeTable(props: { userId: string | undefined }) {
</Row> </Row>
))} ))}
</Col> </Col>
<Col className="justify-content-stretch min-w-[300px] flex-1 divide-y"> <Col className="flex-1 divide-y">
{filteredChanges.slice(count / 2).map((contract) => ( {filteredChanges.slice(count / 2).map((contract) => (
<Row className="items-center hover:bg-gray-100"> <Row className="items-center hover:bg-gray-100">
<ProbChange <ProbChange
@ -60,7 +63,14 @@ export function ProbChangeTable(props: { userId: string | undefined }) {
</Row> </Row>
))} ))}
</Col> </Col>
</Row> </Col>
<div
className={clsx(linkClass, 'cursor-pointer self-end')}
onClick={() => setExpanded(!expanded)}
>
{expanded ? 'Show less' : 'Show more'}
</div>
</Col>
) )
} }