diff --git a/web/components/contract-card.tsx b/web/components/contract-card.tsx
index 90238b3f..152f212c 100644
--- a/web/components/contract-card.tsx
+++ b/web/components/contract-card.tsx
@@ -13,7 +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'
+import { CompactTagsList } from './tags-list'
export function ContractCard(props: {
contract: Contract
@@ -196,7 +196,7 @@ export function ContractDetails(props: { contract: Contract }) {
{tags.length > 0 && (
<>
•
-
+
>
)}
diff --git a/web/components/feed-create.tsx b/web/components/feed-create.tsx
index 7a97a153..061ac5ea 100644
--- a/web/components/feed-create.tsx
+++ b/web/components/feed-create.tsx
@@ -6,8 +6,8 @@ import { Spacer } from './layout/spacer'
import { NewContract } from '../pages/create'
import { firebaseLogin, User } from '../lib/firebase/users'
import { ContractsGrid } from './contracts-list'
-import { SiteLink } from './site-link'
import { Contract } from '../../common/contract'
+import { TagsList } from './tags-list'
export function FeedPromo(props: { hotContracts: Contract[] }) {
const { hotContracts } = props
@@ -33,11 +33,11 @@ export function FeedPromo(props: { hotContracts: Contract[] }) {
-
- {['#politics', '#crypto', '#covid', '#sports', '#meta'].map((tag) => (
-
- ))}
-
+
+
-
- {tag}
-
-
- )
-}
-
export default function FeedCreate(props: { user: User }) {
const { user } = props
const [question, setQuestion] = useState('')
diff --git a/web/components/tags-list.tsx b/web/components/tags-list.tsx
index 1fc13b33..c8d0f815 100644
--- a/web/components/tags-list.tsx
+++ b/web/components/tags-list.tsx
@@ -1,7 +1,45 @@
+import clsx from 'clsx'
import { Row } from './layout/row'
import { Linkify } from './linkify'
+import { SiteLink } from './site-link'
-export function TagsList(props: { tags: string[] }) {
+export function Hashtag(props: { tag: string; noLink?: boolean }) {
+ const { tag, noLink } = props
+ const body = (
+
+ {tag}
+
+ )
+
+ if (noLink) return body
+ return (
+
+ {body}
+
+ )
+}
+
+export function TagsList(props: {
+ tags: string[]
+ className?: string
+ noLink?: boolean
+}) {
+ const { tags, className, noLink } = props
+ return (
+
+ {tags.map((tag) => (
+
+ ))}
+
+ )
+}
+
+export function CompactTagsList(props: { tags: string[] }) {
const { tags } = props
return (
diff --git a/web/pages/activity.tsx b/web/pages/activity.tsx
index 1934f0af..e59aae32 100644
--- a/web/pages/activity.tsx
+++ b/web/pages/activity.tsx
@@ -1,7 +1,6 @@
import _ from 'lodash'
import { ContractFeed } from '../components/contract-feed'
import { Page } from '../components/page'
-import { Title } from '../components/title'
import { Contract } from '../lib/firebase/contracts'
import { Comment } from '../lib/firebase/comments'
import { Col } from '../components/layout/col'
diff --git a/web/pages/fold/[foldSlug]/edit.tsx b/web/pages/fold/[foldSlug]/edit.tsx
index efc6bb53..30fed0ae 100644
--- a/web/pages/fold/[foldSlug]/edit.tsx
+++ b/web/pages/fold/[foldSlug]/edit.tsx
@@ -96,7 +96,10 @@ export default function EditFoldPage(props: { fold: Fold | null }) {
-
+ `#${tag}`)}
+ noLink
+ />