c9229ca2b8
* Add Firestore package and config * Upload basic Firebase Auth code * Basic ability to sign in and view profile * Move html head content to Next's _document * Apply dark theme to all DaisyUI components * Add contract page * Smaller width bet input * Allow users to create new contracts * Add back listenForContract * Add some buttons * Add Row, Col, and Spacer components * Implement skeleton ContractPage * Apply dark theme to all DaisyUI components * Fix hooks lints (#3) * Add background to bet panel * Sort contracts by creation time * Link to market creation from header * List your markets on account page * Set fullscreen black background * Correctly set seeds on new contracts * Code cleanups * Gratuitously cool font * Add creator name, fix ordering * Use Readex Pro as body font * Fixes according to code review Co-authored-by: jahooma <jahooma@gmail.com>
64 lines
2.2 KiB
TypeScript
64 lines
2.2 KiB
TypeScript
import Link from 'next/link'
|
|
import { Contract, deleteContract } from '../lib/firebase/contracts'
|
|
|
|
function ContractCard(props: { contract: Contract }) {
|
|
const { contract } = props
|
|
return (
|
|
<li>
|
|
<Link href={`/contract/${contract.id}`}>
|
|
<a className="block hover:bg-gray-600">
|
|
<div className="px-4 py-4 sm:px-6">
|
|
<div className="flex items-center justify-between">
|
|
<p className="text-sm font-medium text-indigo-300 truncate">
|
|
{contract.question}
|
|
</p>
|
|
<div className="ml-2 flex-shrink-0 flex">
|
|
<p className="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
|
|
{contract.outcomeType}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className="mt-2 sm:flex sm:justify-between">
|
|
<div className="sm:flex">
|
|
<p className="flex items-center text-sm">{contract.id}</p>
|
|
<p className="mt-2 flex items-center text-sm sm:mt-0 sm:ml-6">
|
|
{contract.description}
|
|
</p>
|
|
</div>
|
|
<div className="mt-2 flex items-center text-sm sm:mt-0">
|
|
<p>
|
|
Created on{' '}
|
|
<time dateTime={`${contract.createdTime}`}>
|
|
{new Date(contract.createdTime).toLocaleString()}
|
|
</time>
|
|
</p>
|
|
<button
|
|
className="btn btn-sm btn-error ml-2"
|
|
onClick={() => {
|
|
deleteContract(contract.id)
|
|
}}
|
|
>
|
|
Delete
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</Link>
|
|
</li>
|
|
)
|
|
}
|
|
|
|
export function ContractsList(props: { contracts: Contract[] }) {
|
|
const { contracts } = props
|
|
return (
|
|
<div className="bg-gray-500 shadow 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>
|
|
)
|
|
}
|