diff --git a/common/fold.ts b/common/fold.ts
index 9ef27fd4..c9df3389 100644
--- a/common/fold.ts
+++ b/common/fold.ts
@@ -5,7 +5,7 @@ export type Fold = {
curatorId: string // User id
createdTime: number
- tags: string
+ tags: string[]
contractIds: string[]
excludedContractIds: string[]
diff --git a/web/components/contract-card.tsx b/web/components/contract-card.tsx
index 5b07119f..3bbceb63 100644
--- a/web/components/contract-card.tsx
+++ b/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 && (
<>
•
-
-
- {tags.map((tag) => (
-
-
-
- ))}
-
+
>
)}
diff --git a/web/components/tags-list.tsx b/web/components/tags-list.tsx
new file mode 100644
index 00000000..81e818e4
--- /dev/null
+++ b/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 (
+
+ {tags.map((tag) => (
+
+
+
+ ))}
+
+ )
+}
diff --git a/web/pages/fold/[foldSlug].tsx b/web/pages/fold/[foldSlug].tsx
index cd984f47..b6d7d36c 100644
--- a/web/pages/fold/[foldSlug].tsx
+++ b/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 (
+
+
+