diff --git a/web/components/layout/col.tsx b/web/components/layout/col.tsx index 128b13f4..d5f005ca 100644 --- a/web/components/layout/col.tsx +++ b/web/components/layout/col.tsx @@ -1,7 +1,16 @@ import clsx from 'clsx' +import { CSSProperties } from 'react' -export function Col(props: { children?: any; className?: string }) { - const { children, className } = props +export function Col(props: { + children?: any + className?: string + style?: CSSProperties +}) { + const { children, className, style } = props - return
{children}
+ return ( +
+ {children} +
+ ) } diff --git a/web/pages/fold/[foldSlug]/index.tsx b/web/pages/fold/[foldSlug]/index.tsx index 593a8199..a631a699 100644 --- a/web/pages/fold/[foldSlug]/index.tsx +++ b/web/pages/fold/[foldSlug]/index.tsx @@ -1,4 +1,5 @@ import _ from 'lodash' +import Link from 'next/link' import { Fold } from '../../../../common/fold' import { Comment } from '../../../../common/comment' import { Page } from '../../../components/page' @@ -86,57 +87,77 @@ export default function FoldPage(props: { } = props const fold = useFold(props.fold.id) ?? props.fold + + return ( + + + + + + <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 user = useUser() const isCurator = user?.id === curatorId return ( - <Page> - <Col className="items-center"> - <Col className="max-w-3xl w-full"> - <Title className="!mt-0" text={fold.name} /> + <Col style={{ maxWidth: 350 }}> + <div className="px-4 py-3 bg-indigo-700 text-white text-sm rounded-t"> + About community + </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"> - <SiteLink className="text-sm" href={foldPath(fold, 'markets')}> - Markets - </SiteLink> - <div className="text-gray-500">•</div> - <SiteLink className="text-sm" href={foldPath(fold, 'leaderboards')}> - 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} + <Row> + <div className="text-gray-500 mr-1">Curated by</div> + <UserLink + className="text-neutral" + name={curator.name} + username={curator.username} /> - </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> - </Page> + </Col> ) }