added description for ForumPageHeader (#3904) (#3925)

added description for ForumPageHeader

packages/ui/src/app/pages/Forum/ForumCategory.tsx

@@ -11,7 +11,7 @@ import { Loading } from '@/common/components/Loading'
 import { RowGapBlock } from '@/common/components/page/PageContent'
 import { PageTitle } from '@/common/components/page/PageTitle'
 import { PreviousPage } from '@/common/components/page/PreviousPage'
-import { Label } from '@/common/components/typography'
+import { Label, TextMedium } from '@/common/components/typography'
 import { useModal } from '@/common/hooks/useModal'
 import { useRefetchQueries } from '@/common/hooks/useRefetchQueries'
 import { useSort } from '@/common/hooks/useSort'
@@ -73,6 +73,11 @@ export const ForumCategory = () => {
               <PageTitle>{category.title}</PageTitle>
             </PreviousPage>
           }
+          description={
+            <TextMedium className="category-description" normalWeight inter lighter truncateLines={2}>
+              {category.description}
+            </TextMedium>
+          }
           buttons={
             <TransactionButton
               style="primary"

packages/ui/src/forum/components/ForumPageHeader.tsx

@@ -3,14 +3,16 @@ import React, { useState } from 'react'
 import { PageHeaderRow, PageHeaderWrapper } from '@/app/components/PageLayout'
 import { ButtonsGroup } from '@/common/components/buttons'
 import { SearchBox } from '@/common/components/forms/FilterBox/FilterSearchBox'
+import { TextMedium } from '@/common/components/typography'
 import { useModal } from '@/common/hooks/useModal'
 
 interface ForumPageHeaderProps {
   title: React.ReactNode
   children?: React.ReactNode
   buttons?: React.ReactNode
+  description?: React.ReactNode
 }
-export const ForumPageHeader = ({ title, children, buttons }: ForumPageHeaderProps) => {
+export const ForumPageHeader = ({ title, children, buttons, description }: ForumPageHeaderProps) => {
   const [search, setSearch] = useState('')
 
   const { showModal } = useModal()
@@ -28,6 +30,7 @@ export const ForumPageHeader = ({ title, children, buttons }: ForumPageHeaderPro
           {buttons}
         </ButtonsGroup>
       </PageHeaderRow>
+      {description && <PageHeaderRow>{description}</PageHeaderRow>}
       {children}
     </PageHeaderWrapper>
   )