Sort the contracts in the correct masonry order

This commit is contained in:
Austin Chen 2022-08-18 09:26:18 -07:00
parent 51bc16e856
commit 0499cc5a68

View File

@ -61,16 +61,30 @@ export function ContractsGrid(props: {
</p> </p>
) )
} }
// Reorganize the contracts so that the masonry layout shows them in the original order
// E.g. from [0, 1, 2, 3] => [0, 2, 1, 3]
// E.g. from [0, 1, 2, 3, 4, 5, 6] => [0, 2, 4, 1, 3, 5, 6]
const halfway = Math.floor(contracts.length / 2)
function reorder(i: number) {
return i < halfway
? i * 2
: Math.min((i - halfway) * 2 + 1, (contracts?.length ?? 1) - 1)
}
const twoColContracts = Array.from(
{ length: contracts.length },
(_, i) => contracts[reorder(i)]
)
return ( return (
<Col className="gap-8"> <Col className="gap-8">
<ul <div
className={clsx( className={clsx(
'w-full columns-1 gap-4 space-y-4 md:columns-2', 'w-full columns-1 gap-4 space-y-4 md:columns-2',
gridClassName gridClassName
)} )}
> >
{contracts.map((contract) => ( {/* TODO: When columns-1, don't reorder the contracts */}
{twoColContracts.map((contract) => (
<ContractCard <ContractCard
contract={contract} contract={contract}
key={contract.id} key={contract.id}
@ -86,7 +100,7 @@ export function ContractsGrid(props: {
)} )}
/> />
))} ))}
</ul> </div>
<VisibilityObserver <VisibilityObserver
onVisibilityUpdated={onVisibilityUpdated} onVisibilityUpdated={onVisibilityUpdated}
className="relative -top-96 h-1" className="relative -top-96 h-1"