add dynamic filters to search page

src/components/Hero/Hero.tsx

@@ -4,16 +4,8 @@ import styled from '@emotion/styled'
 export default function Hero() {
   return (
     <Container>
-      <Title genericFontFamily="serif" component="span" variant="h2">
-        LOGOS →{' '}
-        <Title
-          style={{ whiteSpace: 'nowrap' }}
-          genericFontFamily="serif"
-          component="span"
-          variant="h2"
-        >
-          PRESS ENGINE
-        </Title>
+      <Title genericFontFamily="serif" component="h1" variant="h1">
+        LOGOS → PRESS ENGINE
       </Title>
       <Description component="div" variant="label2">
         Blog with media written by Logos members

src/components/Searchbar/Searchbar.tsx

@@ -34,7 +34,7 @@ export type SearchbarProps = {
 
 export default function Searchbar(props: SearchbarProps) {
   const { onSearch, onReset } = props
-  const { resultsNumber, resultsHelperText } = useSearchBarContext()
+  const { resultsNumber, resultsHelperText, tags } = useSearchBarContext()
 
   const [searchScope, setSearchScope] = useState<ESearchScope>(
     props.searchScope || ESearchScope.GLOBAL,
@@ -178,7 +178,7 @@ export default function Searchbar(props: SearchbarProps) {
       {!isArticlePage && (
         <TagsWrapper className={active ? 'active' : ''}>
           <FilterTags
-            tags={copyConfigs.search.filterTags}
+            tags={tags}
             onTagClick={handleTagClick}
             selectedTags={filterTags}
           />

src/pages/search.tsx

@@ -17,20 +17,28 @@ import { SearchLayout } from '@/layouts/SearchLayout'
 import { RelatedArticles } from '@/components/RelatedArticles'
 import { RelatedContent } from '@/components/RelatedContent'
 import { Section } from '@/components/Section/Section'
+import api from '@/services/unbody.service'
+import { useSearchBarContext } from '@/context/searchbar.context'
 
 interface SearchPageProps {
   articles: SearchResultItem<UnbodyGoogleDoc>[]
   blocks: SearchResultItem<UnbodyTextBlock | UnbodyImageBlock>[]
+  topics: string[]
 }
 
 export default function SearchPage({
   articles: initialArticles = [],
   blocks: initialBlocks = [],
+  topics: allTopics = [],
 }: SearchPageProps) {
+  const { setTags } = useSearchBarContext()
   const router = useRouter()
-  const hasUpdated = useRef(false)
   const [mounted, setMounted] = useState(false)
 
+  useEffect(() => {
+    setTags(allTopics)
+  }, [setTags, allTopics])
+
   const {
     query: { query = '', topics = [] },
   } = router
@@ -81,11 +89,13 @@ SearchPage.getLayout = function getLayout(page: ReactNode) {
 export async function getStaticProps() {
   const { data: articles = [] } = await unbodyApi.searchArticles()
   const { data: blocks = [] } = await unbodyApi.serachBlocks()
+  const { data: topics, errors: topicErrors } = await api.getTopics()
 
   return {
     props: {
       articles,
       blocks,
+      topics,
     },
   }
 }