display category in market
This commit is contained in:
parent
b5536a2d35
commit
b6dc281904
|
@ -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
|
||||||
|
|
|
@ -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}
|
||||||
|
|
Loading…
Reference in New Issue
Block a user