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

Split markets into Open and Resolved

Browse Source
This commit is contained in:
Austin Chen 2021-12-13 23:59:04 -08:00
parent d4bb419478
commit f42e3c23da
2 changed files with 61 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/components/title.tsx
View File

@ -5,7 +5,7 @@ export function Title(props: { text: string; className?: string }) {
return ( return (
<h1 <h1
className={clsx( className={clsx(
'text-2xl font-major-mono text-indigo-700 font-bold mt-6 mb-4', 'text-3xl font-major-mono tracking-tight text-indigo-700 font-bold mt-6 mb-4',
className className
)} )}
> >

103
web/pages/markets.tsx
View File

@ -1,4 +1,5 @@
import dayjs from 'dayjs' import dayjs from 'dayjs'
import Link from 'next/link'
import React, { useEffect, useState } from 'react' import React, { useEffect, useState } from 'react'
import { Header } from '../components/header' import { Header } from '../components/header'
import { Col } from '../components/layout/col' import { Col } from '../components/layout/col'
@ -19,48 +20,50 @@ function ContractCard(props: { contract: Contract }) {
const probPercent = Math.round(prob * 100) + '%' const probPercent = Math.round(prob * 100) + '%'
return ( return (
<li className="col-span-1 bg-white hover:bg-gray-100 rounded-lg shadow divide-y divide-gray-200"> <Link href={`/contract/${contract.id}`}>
<div className="card"> <a>
<div className="card-body p-6"> <li className="col-span-1 bg-white hover:bg-gray-100 rounded-lg shadow divide-y divide-gray-200">
<div className="flex justify-between gap-2"> <div className="card">
{/* Left side of card */} <div className="card-body p-6">
<div> <div className="flex justify-between gap-2">
<p className="font-medium text-indigo-700">{contract.question}</p> {/* Left side of card */}
<Spacer h={8} /> <div>
{/* Copied from contract-overview.tsx */} <p className="font-medium text-indigo-700">
<Row className="flex-wrap text-sm text-gray-600"> {contract.question}
<div className="whitespace-nowrap"> </p>
By {contract.creatorName} <Spacer h={8} />
{/* Copied from contract-overview.tsx */}
<Row className="flex-wrap text-sm text-gray-500">
<div className="whitespace-nowrap">
By {contract.creatorName}
</div>
<div className="mx-2">•</div>
<div className="whitespace-nowrap">
{dayjs(createdTime).format('MMM D')}
</div>
<div className="mx-2">•</div>
<div className="whitespace-nowrap">
{formatWithCommas(volume)} vol
</div>
</Row>
</div> </div>
<div className="mx-2">•</div> {/* Right side of card */}
<div className="whitespace-nowrap"> <Col>
{dayjs(createdTime).format('MMM D')} <Col className="text-4xl mx-auto items-end">
</div> {contract.resolution || (
<div className="mx-2">•</div> <div className="text-primary">
<div className="whitespace-nowrap"> {probPercent}
{formatWithCommas(volume)} vol <div className="text-lg">chance</div>
</div> </div>
</Row> )}
</div> </Col>
{/* Right side of card */} </Col>
<Col>
<Col className="text-4xl mb-2 mx-auto text-primary items-end">
{probPercent}
</Col>
{/* Show a yes and a no button side-by-side */}
<div className="flex items-center text-xs gap-1">
<button className="bg-primary text-white font-medium px-4 py-2 rounded-lg">
YES
</button>
<button className="bg-gray-200 text-gray-600 font-medium px-4 py-2 rounded-lg">
NO
</button>
</div> </div>
</Col> </div>
</div> </div>
</div> </li>
</div> </a>
</li> </Link>
) )
} }
@ -74,14 +77,28 @@ export default function Markets() {
<div> <div>
<Header /> <Header />
<div className="max-w-4xl py-8 mx-auto"> <div className="max-w-4xl py-8 mx-auto">
<Title text="Newest markets" /> <Title text="Open markets" />
<ul <ul
role="list" role="list"
className="grid grid-cols-1 gap-6 sm:grid-cols-1 lg:grid-cols-2" className="grid grid-cols-1 gap-6 sm:grid-cols-1 lg:grid-cols-2"
> >
{contracts.map((contract) => ( {contracts
<ContractCard contract={contract} key={contract.id} /> .filter((c) => !c.resolution)
))} .map((contract) => (
<ContractCard contract={contract} key={contract.id} />
))}
</ul>
<Title text="Resolved markets" className="mt-20" />
<ul
role="list"
className="grid grid-cols-1 gap-6 sm:grid-cols-1 lg:grid-cols-2"
>
{contracts
.filter((c) => c.resolution)
.map((contract) => (
<ContractCard contract={contract} key={contract.id} />
))}
</ul> </ul>
</div> </div>
</div> </div>