manifold/web/components/contracts-list.tsx

64 lines
2.2 KiB
TypeScript
Raw Normal View History

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}`}>
2021-12-10 22:56:26 +00:00
<a className="block hover:bg-gray-200">
<div className="px-4 py-4 sm:px-6">
<div className="flex items-center justify-between">
2021-12-10 22:56:26 +00:00
<p className="text-sm font-medium text-indigo-500 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
2021-12-10 18:07:38 +00:00
className="btn btn-sm btn-error btn-outline ml-2"
onClick={() => {
deleteContract(contract.id)
}}
>
Delete
</button>
</div>
</div>
</div>
</a>
</Link>
</li>
)
}
export function ContractsList(props: { contracts: Contract[] }) {
const { contracts } = props
return (
2021-12-10 22:56:26 +00:00
<div className="bg-gray-100 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>
)
}