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

Use ContractsGrid for your markets

Browse Source
This commit is contained in:
Austin Chen 2021-12-14 00:35:20 -08:00
parent f42e3c23da
commit c900c1798b
2 changed files with 20 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
web/components/contracts-list.tsx
View File

@ -7,6 +7,7 @@ import {
deleteContract,
listContracts,
} from '../lib/firebase/contracts'
import { ContractsGrid } from '../pages/markets'
function ContractCard(props: { contract: Contract }) {
const { contract } = props
@ -77,13 +78,5 @@ export function ContractsList(props: {}) {
}
}, [creator])
return (
<div className="bg-gray-100 shadow-xl overflow-hidden sm:rounded-md max-w-4xl w-full">
<ul role="list" className="divide-y divide-gray-200">
{contracts.map((contract) => (
<ContractCard contract={contract} key={contract.id} />
))}
</ul>
</div>
)
return <ContractsGrid contracts={contracts} />
}

39
web/pages/markets.tsx
View File

@ -22,7 +22,7 @@ function ContractCard(props: { contract: Contract }) {
return (
<Link href={`/contract/${contract.id}`}>
<a>
<li className="col-span-1 bg-white hover:bg-gray-100 rounded-lg shadow divide-y divide-gray-200">
<li className="col-span-1 bg-white hover:bg-gray-100 shadow-xl rounded-lg divide-y divide-gray-200">
<div className="card">
<div className="card-body p-6">
<div className="flex justify-between gap-2">
@ -67,6 +67,21 @@ function ContractCard(props: { contract: Contract }) {
)
}
export function ContractsGrid(props: { contracts: Contract[] }) {
const { contracts } = props
return (
<ul
role="list"
className="grid grid-cols-1 gap-6 sm:grid-cols-1 lg:grid-cols-2"
>
{contracts.map((contract) => (
<ContractCard contract={contract} key={contract.id} />
))}
{/* TODO: Show placeholder if empty */}
</ul>
)
}
export default function Markets() {
const [contracts, setContracts] = useState<Contract[]>([])
useEffect(() => {
@ -78,28 +93,10 @@ export default function Markets() {
<Header />
<div className="max-w-4xl py-8 mx-auto">
<Title text="Open markets" />
<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>
<ContractsGrid contracts={contracts.filter((c) => !c.resolution)} />
<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>
<ContractsGrid contracts={contracts.filter((c) => c.resolution)} />
</div>
</div>
)