Use nicer tag component for folds

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 && (
         <>
           <div className="hidden sm:block">•</div>
-          <TagsList tags={tags} />
+          <CompactTagsList tags={tags} />
         </>
       )}
     </Col>

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[] }) {
           <br />
         </div>
 
-        <div className="flex flex-wrap mt-2 gap-2">
+        <TagsList
-          {['#politics', '#crypto', '#covid', '#sports', '#meta'].map((tag) => (
+          className="mt-2"
-            <Hashtag tag={tag} />
+          tags={['#politics', '#crypto', '#covid', '#sports', '#meta']}
-          ))}
+        />
-        </div>
+
         <Spacer h={4} />
 
         <ContractsGrid
@@ -49,17 +49,6 @@ export function FeedPromo(props: { hotContracts: Contract[] }) {
   )
 }
 
-function Hashtag(props: { tag: string }) {
-  const { tag } = props
-  return (
-    <SiteLink href={`/tag/${tag.substring(1)}`} className="flex items-center">
-      <div className="bg-white hover:bg-gray-100 cursor-pointer px-4 py-2 rounded-full shadow-md">
-        <span className="text-gray-500">{tag}</span>
-      </div>
-    </SiteLink>
-  )
-}
-
 export default function FeedCreate(props: { user: User }) {
   const { user } = props
   const [question, setQuestion] = useState('')

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 = (
+    <div
+      className={clsx(
+        'bg-white hover:bg-gray-100 px-4 py-2 rounded-full shadow-md',
+        !noLink && 'cursor-pointer'
+      )}
+    >
+      <span className="text-gray-500">{tag}</span>
+    </div>
+  )
+
+  if (noLink) return body
+  return (
+    <SiteLink href={`/tag/${tag.substring(1)}`} className="flex items-center">
+      {body}
+    </SiteLink>
+  )
+}
+
+export function TagsList(props: {
+  tags: string[]
+  className?: string
+  noLink?: boolean
+}) {
+  const { tags, className, noLink } = props
+  return (
+    <Row className={clsx('flex-wrap gap-2', className)}>
+      {tags.map((tag) => (
+        <Hashtag key={tag} tag={tag} noLink={noLink} />
+      ))}
+    </Row>
+  )
+}
+
+export function CompactTagsList(props: { tags: string[] }) {
   const { tags } = props
   return (
     <Row className="gap-2 flex-wrap text-sm text-gray-500">

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'

web/pages/fold/[foldSlug]/edit.tsx

@@ -96,7 +96,10 @@ export default function EditFoldPage(props: { fold: Fold | null }) {
           </div>
 
           <Spacer h={4} />
-          <TagsList tags={parseWordsAsTags(tags)} />
+          <TagsList
+            tags={parseWordsAsTags(tags).map((tag) => `#${tag}`)}
+            noLink
+          />
           <Spacer h={4} />
 
           <button

web/pages/fold/[foldSlug]/index.tsx

@@ -88,7 +88,7 @@ export default function FoldPage(props: {
     <Page>
       <Col className="items-center">
         <Col className="max-w-3xl w-full">
-          <Title text={fold.name} />
+          <Title className="!mt-0" text={fold.name} />
 
           <Row className="items-center gap-2 mb-2 flex-wrap">
             <SiteLink className="text-sm" href={foldPath(fold, 'markets')}>
@@ -117,9 +117,11 @@ export default function FoldPage(props: {
             )}
           </Row>
 
+          <Spacer h={2} />
+
           <TagsList tags={tags.map((tag) => `#${tag}`)} />
 
-          <Spacer h={4} />
+          <Spacer h={8} />
 
           <ActivityFeed
             contracts={activeContracts}

web/pages/folds.tsx

@@ -151,7 +151,10 @@ function CreateFoldButton() {
         </div>
 
         <Spacer h={4} />
-        <TagsList tags={parseWordsAsTags(tags)} />
+        <TagsList
+          tags={parseWordsAsTags(tags).map((tag) => `#${tag}`)}
+          noLink
+        />
       </form>
     </ConfirmationButton>
   )