Adding Campaign Page Chips to Sections

public/locales/bg/campaigns.json

@@ -151,7 +151,15 @@
     "end-date": "Крайна дата:",
     "indefinite": "Безсрочна",
     "tag": "Таг:",
-    "date": "Дата:"
+    "date": "Дата:",
+    "chipsLabels": {
+      "news": "Новини",
+      "docs": "Документи",
+      "experts": "Експертен съвет",
+      "guarantor": "Гарант",
+      "signals": "Сигнали",
+      "others": "Други"
+    }
   },
   "info-graphics": {
     "donation-title": "100% от дарението отива при нуждаещите се",

public/locales/en/campaigns.json

@@ -145,7 +145,15 @@
     "start-date": "Start date:",
     "end-date": "End date:",
     "tag": "Tag:",
-    "date": "Date:"
+    "date": "Date:",
+    "chipsLabels": {
+      "news": "News",
+      "docs": "Documents",
+      "experts": "Experts",
+      "guarantor": "Guarantor",
+      "signals": "Signals",
+      "others": "Others"
+    }
   },
   "info-graphics": {
     "donation-title": "100% of the donation goes to those in need",

src/components/client/campaigns/CampaignDetails.tsx

@@ -26,6 +26,7 @@ import { routes } from 'common/routes'
 import { useCanEditCampaign } from 'common/hooks/campaigns'
 import { moneyPublic } from 'common/util/money'
 import ReceiptLongIcon from '@mui/icons-material/ReceiptLong'
+import CampaignDetailsChip from './CampaignDetailsChip'
 
 const ReactQuill = dynamic(() => import('react-quill'), { ssr: false })
 const CampaignNewsSection = dynamic(() => import('./CampaignNewsSection'), { ssr: false })
@@ -102,6 +103,22 @@ export default function CampaignDetails({ campaign }: Props) {
   const { data: expensesList } = useCampaignApprovedExpensesList(campaign.slug)
   const totalExpenses = expensesList?.reduce((acc, expense) => acc + expense.amount, 0)
 
+  const chipsLabel = {
+    news: t('campaigns:campaign.chipsLabels.news'),
+    docs: t('campaigns:campaign.chipsLabels.docs'),
+    experts: t('campaigns:campaign.chipsLabels.experts'),
+    guarantor: t('campaigns:campaign.chipsLabels.guarantor'),
+    signals: t('campaigns:campaign.chipsLabels.signals'),
+    others: t('campaigns:campaign.chipsLabels.others'),
+  }
+
+  const scrollToSection = (sectionId: string) => {
+    const target = document.getElementById(sectionId)
+    if (target) {
+      target.scrollIntoView({ behavior: 'smooth' })
+    }
+  }
+
   return (
     <StyledGrid item xs={12} md={8}>
       <Typography variant="h1" component="h1" mb={8} className={classes.campaignTitle}>
@@ -121,6 +138,11 @@ export default function CampaignDetails({ campaign }: Props) {
         <Grid item xs={12}>
           <Divider />
         </Grid>
+        <Grid container item xs={12}>
+          {Object.entries(chipsLabel).map(([id, label]) => (
+            <CampaignDetailsChip key={id} chip={label} onClick={() => scrollToSection(id)} />
+          ))}
+        </Grid>
         <Grid item xs={12}>
           <CampaignInfoOperator campaign={campaign} />
         </Grid>

src/components/client/campaigns/CampaignDetailsChip.tsx

@@ -0,0 +1,11 @@
+import { Chip } from '@mui/material'
+
+interface CampaingDetailsChipProps {
+  chip: string
+  onClick: () => void
+}
+
+const CampaignDetailsChip: React.FC<CampaingDetailsChipProps> = ({ chip, onClick }) => {
+  return <Chip label={chip} sx={{ marginX: '2px' }} onClick={onClick} />
+}
+export default CampaignDetailsChip

src/components/client/campaigns/CampaignNewsSection.tsx

@@ -154,7 +154,7 @@ export default function CampaignNewsSection({ campaign, canCreateArticle }: Prop
   const [isExpanded, expandContent] = useShowMoreContent()
 
   return (
-    <Grid container item xs={12} spacing={1}>
+    <Grid container item xs={12} spacing={1} id="news">
       <Grid container item flexDirection={'column'}>
         <Typography component={'h3'} fontSize={25} color="#000000">
           {t('news')}