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

Reimplement hot markets with flex box, since I can't figure out how to make the css grid version not flash bad layout.

Browse Source
This commit is contained in:
jahooma 2022-01-14 00:55:35 -06:00
parent 3e08349df6
commit 40c853e595
2 changed files with 28 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
web/components/contract-card.tsx
View File

@ -17,15 +17,16 @@ import { TrendingUpIcon } from '@heroicons/react/solid'
export function ContractCard(props: { export function ContractCard(props: {
contract: Contract contract: Contract
showHotVolume?: boolean showHotVolume?: boolean
className?: string
}) { }) {
const { contract, showHotVolume } = props const { contract, showHotVolume, className } = props
const { question, resolution } = contract const { question, resolution } = contract
const { probPercent } = contractMetrics(contract) const { probPercent } = contractMetrics(contract)
return ( return (
<Link href={contractPath(contract)}> <Link href={contractPath(contract)}>
<a className="col-span-1"> <a className={clsx('col-span-1', className)}>
<li className="bg-white hover:bg-gray-100 shadow-md rounded-lg divide-y divide-gray-200"> <li className="bg-white hover:bg-gray-100 shadow-md rounded-lg divide-y divide-gray-200 list-none">
<div className="card"> <div className="card">
<div className="card-body p-6"> <div className="card-body p-6">
<Row className="justify-between gap-4 mb-2"> <Row className="justify-between gap-4 mb-2">

31
web/pages/index.tsx
View File

@ -5,12 +5,13 @@ import {
getHotContracts, getHotContracts,
listAllContracts, listAllContracts,
} from '../lib/firebase/contracts' } from '../lib/firebase/contracts'
import { ContractsGrid } from '../components/contracts-list'
import { Spacer } from '../components/layout/spacer' import { Spacer } from '../components/layout/spacer'
import { Page } from '../components/page' import { Page } from '../components/page'
import { Title } from '../components/title' import { Title } from '../components/title'
import { ActivityFeed } from './activity' import { ActivityFeed } from './activity'
import { getRecentComments, Comment } from '../lib/firebase/comments' import { getRecentComments, Comment } from '../lib/firebase/comments'
import { Col } from '../components/layout/col'
import { ContractCard } from '../components/contract-card'
export async function getStaticProps() { export async function getStaticProps() {
const [contracts, hotContracts, recentComments] = await Promise.all([ const [contracts, hotContracts, recentComments] = await Promise.all([
@ -39,16 +40,32 @@ const Home = (props: {
return ( return (
<Page> <Page>
<div className="w-full bg-indigo-50 border-2 border-indigo-100 p-6 rounded-lg shadow-md"> <HotMarkets hotContracts={hotContracts} />
<Title className="mt-0" text="🔥 Markets" />
<ContractsGrid contracts={hotContracts} showHotVolume />
</div>
<Spacer h={10} /> <Spacer h={10} />
<ActivityFeed contracts={contracts} recentComments={recentComments} /> <ActivityFeed contracts={contracts} recentComments={recentComments} />
</Page> </Page>
) )
} }
const HotMarkets = (props: { hotContracts: Contract[] }) => {
const { hotContracts } = props
const [c1, c2, c3, c4] = hotContracts
return (
<div className="w-full bg-indigo-50 border-2 border-indigo-100 p-6 rounded-lg shadow-md">
<Title className="mt-0" text="🔥 Markets" />
<Col className="gap-6">
<Col className="md:flex-row gap-6">
<ContractCard className="flex-1" contract={c1} showHotVolume />
<ContractCard className="flex-1" contract={c2} showHotVolume />
</Col>
<Col className="md:flex-row gap-6">
<ContractCard className="flex-1" contract={c3} showHotVolume />
<ContractCard className="flex-1" contract={c4} showHotVolume />
</Col>
</Col>
</div>
)
}
export default Home export default Home