53 lines
1.7 KiB
TypeScript
53 lines
1.7 KiB
TypeScript
|
import { Contract } from 'common/contract'
|
||
|
|
import { range } from 'lodash'
|
||
|
|
import { Carousel } from 'web/components/carousel'
|
||
|
|
import { ContractCard } from 'web/components/contract/contract-card'
|
||
|
|
import { ShowTime } from 'web/components/contract/contract-details'
|
||
|
|
import { Col } from 'web/components/layout/col'
|
||
|
|
|
||
|
|
export function DoubleCarousel(props: {
|
||
|
|
contracts: Contract[]
|
||
|
|
seeMoreUrl?: string
|
||
|
|
showTime?: ShowTime
|
||
|
|
loadMore?: () => void
|
||
|
|
}) {
|
||
|
|
const { contracts, showTime, loadMore } = props
|
||
|
|
return (
|
||
|
|
<Carousel className="-mx-4 mt-2 sm:-mx-10" loadMore={loadMore}>
|
||
|
|
<div className="shrink-0 sm:w-6" />
|
||
|
|
{contracts.length >= 6
|
||
|
|
? range(0, Math.floor(contracts.length / 2)).map((col) => {
|
||
|
|
const i = col * 2
|
||
|
|
return (
|
||
|
|
<Col key={contracts[i].id}>
|
||
|
|
<ContractCard
|
||
|
|
contract={contracts[i]}
|
||
|
|
className="mb-2 w-96 shrink-0"
|
||
|
|
questionClass="line-clamp-3"
|
||
|
|
trackingPostfix=" tournament"
|
||
|
|
showTime={showTime}
|
||
|
|
/>
|
||
|
|
<ContractCard
|
||
|
|
contract={contracts[i + 1]}
|
||
|
|
className="mb-2 w-96 shrink-0"
|
||
|
|
questionClass="line-clamp-3"
|
||
|
|
trackingPostfix=" tournament"
|
||
|
|
showTime={showTime}
|
||
|
|
/>
|
||
|
|
</Col>
|
||
|
|
)
|
||
|
|
})
|
||
|
|
: contracts.map((c) => (
|
||
|
|
<ContractCard
|
||
|
|
key={c.id}
|
||
|
|
contract={c}
|
||
|
|
className="mb-2 max-h-[220px] w-96 shrink-0"
|
||
|
|
questionClass="line-clamp-3"
|
||
|
|
trackingPostfix=" tournament"
|
||
|
|
showTime={showTime}
|
||
|
|
/>
|
||
|
|
))}
|
||
|
|
</Carousel>
|
||
|
|
)
|
||
|
|
}
|