Show tags on fold page

common/fold.ts

@@ -5,7 +5,7 @@ export type Fold = {
   curatorId: string // User id
   createdTime: number
 
-  tags: string
+  tags: string[]
 
   contractIds: string[]
   excludedContractIds: string[]

web/components/contract-card.tsx

@@ -3,7 +3,6 @@ import Link from 'next/link'
 import { Row } from '../components/layout/row'
 import { formatMoney } from '../lib/util/format'
 import { UserLink } from './user-page'
-import { Linkify } from './linkify'
 import {
   Contract,
   contractMetrics,
@@ -14,6 +13,7 @@ import { parseTags } from '../../common/util/parse'
 import dayjs from 'dayjs'
 import { TrendingUpIcon, ClockIcon } from '@heroicons/react/solid'
 import { DateTimeTooltip } from './datetime-tooltip'
+import { TagsList } from './tags-list'
 
 export function ContractCard(props: {
   contract: Contract
@@ -187,14 +187,7 @@ export function ContractDetails(props: { contract: Contract }) {
       {tags.length > 0 && (
         <>
           <div className="hidden sm:block">•</div>
-
+          <TagsList tags={tags} />
-          <Row className="gap-2 flex-wrap">
-            {tags.map((tag) => (
-              <div key={tag} className="bg-gray-100 px-1">
-                <Linkify text={tag} gray />
-              </div>
-            ))}
-          </Row>
         </>
       )}
     </Col>

web/components/tags-list.tsx

@@ -0,0 +1,15 @@
+import { Row } from './layout/row'
+import { Linkify } from './linkify'
+
+export function TagsList(props: { tags: string[] }) {
+  const { tags } = props
+  return (
+    <Row className="gap-2 flex-wrap">
+      {tags.map((tag) => (
+        <div key={tag} className="bg-gray-100 px-1">
+          <Linkify text={tag} gray />
+        </div>
+      ))}
+    </Row>
+  )
+}

web/pages/fold/[foldSlug].tsx

@@ -7,6 +7,7 @@ import { getRecentComments, listAllComments } from '../../lib/firebase/comments'
 import { Contract } from '../../lib/firebase/contracts'
 import { getFoldBySlug, getFoldContracts } from '../../lib/firebase/folds'
 import { ActivityFeed, findActiveContracts } from '../activity'
+import { TagsList } from '../../components/tags-list'
 
 export async function getStaticProps(props: { params: { foldSlug: string } }) {
   const { foldSlug } = props.params
@@ -50,9 +51,14 @@ export default function FoldPage(props: {
   const { fold, activeContracts, activeContractBets, activeContractComments } =
     props
 
+  const { tags } = fold
+
   return (
     <Page>
       <Title text={fold.name} />
+
+      <TagsList tags={tags} />
+
       <ActivityFeed
         contracts={activeContracts}
         contractBets={activeContractBets}