Tabbed fold page

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 <div className={clsx(className, 'flex flex-col')}>{children}</div>
+  return (
+    <div className={clsx(className, 'flex flex-col')} style={style}>
+      {children}
+    </div>
+  )
 }

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 (
+    <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 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>
   )
 }