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 + />