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

Update Daily movers UI

Browse Source
This commit is contained in:
James Grugett 2022-09-07 01:18:11 -05:00
parent a40bdc28be
commit ad18987e65
2 changed files with 30 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
web/components/contract/prob-change-table.tsx
View File

@ -4,12 +4,13 @@ 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 { SiteLink } from '../site-link'
import { Col } from '../layout/col'
import { Row } from '../layout/row'
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 ?? '')
console.log('changes', changes)
if (!changes) { if (!changes) {
return null return null
@ -20,31 +21,34 @@ export function ProbChangeTable(props: { userId: string | undefined }) {
const count = 3 const count = 3
return ( return (
<div className="grid max-w-xl gap-x-2 gap-y-2 rounded bg-white p-4 text-gray-700"> <Row className="w-full flex-wrap divide-x-2 rounded bg-white shadow-md">
<div className="text-xl text-gray-800">Daily movers</div> <Col className="min-w-[300px] flex-1 divide-y">
<div className="text-right">% pts</div>
{positiveChanges.slice(0, count).map((contract) => ( {positiveChanges.slice(0, count).map((contract) => (
<> <Row className="hover:bg-gray-100">
<div className="line-clamp-2"> <ProbChange className="p-4 text-right" contract={contract} />
<SiteLink href={contractPath(contract)}> <SiteLink
className="p-4 font-semibold text-indigo-700"
href={contractPath(contract)}
>
{contract.question} {contract.question}
</SiteLink> </SiteLink>
</div> </Row>
<ProbChange className="text-right" contract={contract} />
</>
))} ))}
<div className="col-span-2 my-2" /> </Col>
<Col className="justify-content-stretch min-w-[300px] flex-1 divide-y">
{negativeChanges.slice(0, count).map((contract) => ( {negativeChanges.slice(0, count).map((contract) => (
<> <Row className="hover:bg-gray-100">
<div className="line-clamp-2"> <ProbChange className="p-4 text-right" contract={contract} />
<SiteLink href={contractPath(contract)}> <SiteLink
className="p-4 font-semibold text-indigo-700"
href={contractPath(contract)}
>
{contract.question} {contract.question}
</SiteLink> </SiteLink>
</div> </Row>
<ProbChange className="text-right" contract={contract} />
</>
))} ))}
</div> </Col>
</Row>
) )
} }
@ -59,10 +63,10 @@ export function ProbChange(props: {
const color = const color =
change > 0 change > 0
? 'text-green-500' ? 'text-green-600'
: change < 0 : change < 0
? 'text-red-500' ? 'text-red-600'
: 'text-gray-500' : 'text-gray-600'
const str = const str =
change === 0 change === 0

1
web/pages/experimental/home/index.tsx
View File

@ -77,6 +77,7 @@ const Home = (props: { auth: { user: User } | null }) => {
</> </>
) : ( ) : (
<> <>
<div className="text-xl text-gray-800">Daily movers</div>
<ProbChangeTable userId={user?.id} /> <ProbChangeTable userId={user?.id} />
{visibleItems.map((item) => { {visibleItems.map((item) => {