display category in market

This commit is contained in:
mantikoros 2022-05-03 11:44:44 -04:00
parent b5536a2d35
commit b6dc281904
2 changed files with 17 additions and 2 deletions

View File

@ -2,6 +2,7 @@ import clsx from 'clsx'
import dayjs from 'dayjs' import dayjs from 'dayjs'
import { useState } from 'react' import { useState } from 'react'
import Textarea from 'react-expanding-textarea' import Textarea from 'react-expanding-textarea'
import { CATEGORY_LIST } from '../../../common/categories'
import { Contract } from '../../../common/contract' import { Contract } from '../../../common/contract'
import { parseTags } from '../../../common/util/parse' import { parseTags } from '../../../common/util/parse'
@ -9,6 +10,7 @@ import { useAdmin } from '../../hooks/use-admin'
import { updateContract } from '../../lib/firebase/contracts' import { updateContract } from '../../lib/firebase/contracts'
import { Row } from '../layout/row' import { Row } from '../layout/row'
import { Linkify } from '../linkify' import { Linkify } from '../linkify'
import { TagsList } from '../tags-list'
export function ContractDescription(props: { export function ContractDescription(props: {
contract: Contract contract: Contract
@ -26,6 +28,7 @@ export function ContractDescription(props: {
`${newDescription} ${contract.tags.map((tag) => `#${tag}`).join(' ')}` `${newDescription} ${contract.tags.map((tag) => `#${tag}`).join(' ')}`
) )
const lowercaseTags = tags.map((tag) => tag.toLowerCase()) const lowercaseTags = tags.map((tag) => tag.toLowerCase())
await updateContract(contract.id, { await updateContract(contract.id, {
description: newDescription, description: newDescription,
tags, tags,
@ -35,6 +38,9 @@ export function ContractDescription(props: {
if (!isCreator && !contract.description.trim()) return null if (!isCreator && !contract.description.trim()) return null
const { tags } = contract
const category = tags.find((tag) => CATEGORY_LIST.includes(tag.toLowerCase()))
return ( return (
<div <div
className={clsx( className={clsx(
@ -43,7 +49,15 @@ export function ContractDescription(props: {
)} )}
> >
<Linkify text={contract.description} /> <Linkify text={contract.description} />
{category && (
<div className="mt-4">
<TagsList tags={[category]} label="Category" />
</div>
)}
<br /> <br />
{isCreator && ( {isCreator && (
<EditContract <EditContract
// Note: Because descriptionTimestamp is called once, later edits use // Note: Because descriptionTimestamp is called once, later edits use

View File

@ -30,11 +30,12 @@ export function TagsList(props: {
className?: string className?: string
noLink?: boolean noLink?: boolean
noLabel?: boolean noLabel?: boolean
label?: string
}) { }) {
const { tags, className, noLink, noLabel } = props const { tags, className, noLink, noLabel, label } = props
return ( return (
<Row className={clsx('flex-wrap items-center gap-2', className)}> <Row className={clsx('flex-wrap items-center gap-2', className)}>
{!noLabel && <div className="mr-1 text-gray-500">Tags</div>} {!noLabel && <div className="mr-1 text-gray-500">{label || 'Tags'}</div>}
{tags.map((tag) => ( {tags.map((tag) => (
<Hashtag <Hashtag
key={tag} key={tag}