Tabbed fold page
This commit is contained in:
parent
ed9285dbc1
commit
1f55311e28
|
@ -1,7 +1,16 @@
|
||||||
import clsx from 'clsx'
|
import clsx from 'clsx'
|
||||||
|
import { CSSProperties } from 'react'
|
||||||
|
|
||||||
export function Col(props: { children?: any; className?: string }) {
|
export function Col(props: {
|
||||||
const { children, className } = props
|
children?: any
|
||||||
|
className?: string
|
||||||
|
style?: CSSProperties
|
||||||
|
}) {
|
||||||
|
const { children, className, style } = props
|
||||||
|
|
||||||
return <div className={clsx(className, 'flex flex-col')}>{children}</div>
|
return (
|
||||||
|
<div className={clsx(className, 'flex flex-col')} style={style}>
|
||||||
|
{children}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,4 +1,5 @@
|
||||||
import _ from 'lodash'
|
import _ from 'lodash'
|
||||||
|
import Link from 'next/link'
|
||||||
import { Fold } from '../../../../common/fold'
|
import { Fold } from '../../../../common/fold'
|
||||||
import { Comment } from '../../../../common/comment'
|
import { Comment } from '../../../../common/comment'
|
||||||
import { Page } from '../../../components/page'
|
import { Page } from '../../../components/page'
|
||||||
|
@ -86,57 +87,77 @@ export default function FoldPage(props: {
|
||||||
} = props
|
} = props
|
||||||
|
|
||||||
const fold = useFold(props.fold.id) ?? props.fold
|
const fold = useFold(props.fold.id) ?? props.fold
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Page wide>
|
||||||
|
<Col className="items-center">
|
||||||
|
<Col>
|
||||||
|
<Title className="!mt-0" text={fold.name} />
|
||||||
|
|
||||||
|
<div className="tabs mb-4">
|
||||||
|
<div className="tab tab-bordered tab-active">Activity</div>
|
||||||
|
|
||||||
|
<Link href={foldPath(fold, 'markets')}>
|
||||||
|
<a className="tab tab-bordered">Markets</a>
|
||||||
|
</Link>
|
||||||
|
<Link href={foldPath(fold, 'leaderboards')}>
|
||||||
|
<a className="tab tab-bordered ">Leaderboards</a>
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Row className="gap-8 bg-">
|
||||||
|
<Col className="max-w-2xl w-full">
|
||||||
|
<ActivityFeed
|
||||||
|
contracts={activeContracts}
|
||||||
|
contractBets={activeContractBets}
|
||||||
|
contractComments={activeContractComments}
|
||||||
|
/>
|
||||||
|
</Col>
|
||||||
|
<FoldOverview fold={fold} curator={curator} />
|
||||||
|
</Row>
|
||||||
|
</Col>
|
||||||
|
</Col>
|
||||||
|
</Page>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function FoldOverview(props: { fold: Fold; curator: User }) {
|
||||||
|
const { fold, curator } = props
|
||||||
const { tags, curatorId } = fold
|
const { tags, curatorId } = fold
|
||||||
|
|
||||||
const user = useUser()
|
const user = useUser()
|
||||||
const isCurator = user?.id === curatorId
|
const isCurator = user?.id === curatorId
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Page>
|
<Col style={{ maxWidth: 350 }}>
|
||||||
<Col className="items-center">
|
<div className="px-4 py-3 bg-indigo-700 text-white text-sm rounded-t">
|
||||||
<Col className="max-w-3xl w-full">
|
About community
|
||||||
<Title className="!mt-0" text={fold.name} />
|
</div>
|
||||||
|
<Col className="p-4 bg-white self-start gap-2 rounded-b">
|
||||||
|
{isCurator && (
|
||||||
|
<SiteLink className="text-sm " href={foldPath(fold, 'edit')}>
|
||||||
|
Edit
|
||||||
|
</SiteLink>
|
||||||
|
)}
|
||||||
|
|
||||||
<Row className="items-center gap-2 mb-2 flex-wrap">
|
<Row>
|
||||||
<SiteLink className="text-sm" href={foldPath(fold, 'markets')}>
|
<div className="text-gray-500 mr-1">Curated by</div>
|
||||||
Markets
|
<UserLink
|
||||||
</SiteLink>
|
className="text-neutral"
|
||||||
<div className="text-gray-500">•</div>
|
name={curator.name}
|
||||||
<SiteLink className="text-sm" href={foldPath(fold, 'leaderboards')}>
|
username={curator.username}
|
||||||
Leaderboards
|
|
||||||
</SiteLink>
|
|
||||||
<div className="text-gray-500">•</div>
|
|
||||||
<Row>
|
|
||||||
<div className="text-sm text-gray-500 mr-1">Curated by</div>
|
|
||||||
<UserLink
|
|
||||||
className="text-sm text-neutral"
|
|
||||||
name={curator.name}
|
|
||||||
username={curator.username}
|
|
||||||
/>
|
|
||||||
</Row>
|
|
||||||
{isCurator && (
|
|
||||||
<>
|
|
||||||
<div className="text-gray-500">•</div>
|
|
||||||
<SiteLink className="text-sm " href={foldPath(fold, 'edit')}>
|
|
||||||
Edit
|
|
||||||
</SiteLink>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</Row>
|
|
||||||
|
|
||||||
<Spacer h={2} />
|
|
||||||
|
|
||||||
<TagsList tags={tags.map((tag) => `#${tag}`)} />
|
|
||||||
|
|
||||||
<Spacer h={8} />
|
|
||||||
|
|
||||||
<ActivityFeed
|
|
||||||
contracts={activeContracts}
|
|
||||||
contractBets={activeContractBets}
|
|
||||||
contractComments={activeContractComments}
|
|
||||||
/>
|
/>
|
||||||
</Col>
|
</Row>
|
||||||
|
|
||||||
|
<Spacer h={2} />
|
||||||
|
<div className="text-gray-500">
|
||||||
|
This is a community for predicting asdf asd fasdf asdf asdf .
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Spacer h={2} />
|
||||||
|
|
||||||
|
<TagsList tags={tags.map((tag) => `#${tag}`)} />
|
||||||
</Col>
|
</Col>
|
||||||
</Page>
|
</Col>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue
Block a user