close #39

src/components/Navbar/NavbarFiller.tsx

@@ -1,5 +1,20 @@
 import styled from '@emotion/styled'
+import { FilterTags } from '@/components/FilterTags'
+import { useSearchBarContext } from '@/context/searchbar.context'
 
-export const NavbarFiller = styled.div`
+export const NavbarFiller = () => {
+  const { tags } = useSearchBarContext()
+  return (
+    <NavbarFillerContainer>
+      <FilterTags tags={tags} selectedTags={[]} />
+    </NavbarFillerContainer>
+  )
+}
+export const NavbarFillerContainer = styled.div`
   height: var(--lpe-nav-rendered-height);
+  margin: auto;
+  width: 100%;
+  text-align: center;
+  display: flex;
+  justify-content: center;
 `

src/context/searchbar.context.tsx

@@ -7,6 +7,8 @@ type SearchBarContext = SearchbarProps & {
   setResultsNumber: (resultsNumber: number | null) => void
   resultsHelperText: string | null
   setResultsHelperText: (resultsHelperText: string | null) => void
+  tags: string[]
+  setTags: (tags: string[]) => void
 }
 
 const SearchBarContext = createContext<SearchBarContext>({
@@ -14,6 +16,8 @@ const SearchBarContext = createContext<SearchBarContext>({
   setResultsNumber: () => {},
   resultsHelperText: null,
   setResultsHelperText: () => {},
+  tags: [],
+  setTags: () => {},
 })
 
 export const SearchBarProvider = ({ children }: any) => {
@@ -21,7 +25,7 @@ export const SearchBarProvider = ({ children }: any) => {
   const [resultsHelperText, setResultsHelperText] = useState<string | null>(
     null,
   )
-
+  const [tags, setTags] = useState<string[]>([])
   return (
     <SearchBarContext.Provider
       value={{
@@ -29,6 +33,8 @@ export const SearchBarProvider = ({ children }: any) => {
         setResultsNumber,
         resultsHelperText,
         setResultsHelperText,
+        tags,
+        setTags,
       }}
     >
       {children}

src/layouts/DefaultLayout/Default.layout.tsx

@@ -6,16 +6,22 @@ import { NavbarFiller } from '@/components/Navbar/NavbarFiller'
 import { Searchbar } from '@/components/Searchbar'
 import { Footer } from '@/components/Footer'
 import { Main } from '@/components/Main'
+import { uiConfigs } from '@/configs/ui.configs'
 
 export default function DefaultLayout(props: PropsWithChildren<any>) {
   const isDarkState = useIsDarkState()
 
   return (
     <>
-      <header>
+      <header
+        style={{
+          textAlign: 'center',
+          marginBlock: `${uiConfigs.navbarRenderedHeight}px`,
+        }}
+      >
         <Navbar isDark={isDarkState.get()} toggle={isDarkState.toggle} />
-        <NavbarFiller />
         <Hero />
+        <NavbarFiller />
         <Searchbar />
       </header>
       <Main>{props.children}</Main>

src/lib/unbody/unbody.types.ts

@@ -37,6 +37,10 @@ export type UnbodyGraphQlResponseGoogleDoc = UnbodyGraphQlResponse<{
   GoogleDoc: UnbodyGoogleDoc[]
 }>
 
+export type UnbodyGraphQlResponseTopics = UnbodyGraphQlResponse<{
+  GoogleDoc: { tags: string[] }[]
+}>
+
 export type UnbodyGraphQlResponseGoogleCalendarEvent = UnbodyGraphQlResponse<{
   GoogleCalendarEvent: UnbodyGoogleCalendarEvent[]
 }>

src/pages/index.tsx

@@ -7,14 +7,23 @@ import { Section } from '@/components/Section/Section'
 import { getArticleCover } from '@/utils/data.utils'
 import { FeaturedPost } from '@/components/FeaturedPost'
 import { PostListLayout } from '@/types/ui.types'
+import { useSearchBarContext } from '@/context/searchbar.context'
+import { useEffect } from 'react'
 
 type Props = {
   posts: PostDataProps[]
   featured: PostDataProps | null
   error: string | null
+  tags: string[]
 }
 
-export default function Home({ posts, featured }: Props) {
+export default function Home({ posts, featured, tags }: Props) {
+  const { setTags } = useSearchBarContext()
+
+  useEffect(() => {
+    setTags(tags)
+  }, [setTags, tags])
+
   return (
     <>
       {featured && (
@@ -35,6 +44,8 @@ export const getStaticProps = async () => {
     errors,
   } = await api.getHomepagePosts()
 
+  const { data: topics, errors: topicErrors } = await api.getTopics()
+
   return {
     props: {
       featured: featured
@@ -60,6 +71,7 @@ export const getStaticProps = async () => {
         }
       }),
       errors,
+      tags: topics || [],
     },
   }
 }

src/queries/getTopics.ts

@@ -0,0 +1,9 @@
+import { GetGoogleDocQuery } from '.'
+import { UnbodyGetFilters } from '@/lib/unbody/unbody.types'
+
+const defaultArgs: UnbodyGetFilters = {}
+
+export const getTopicsQuery = (args: UnbodyGetFilters = defaultArgs) =>
+  GetGoogleDocQuery(args)(`
+        tags
+  `)

src/services/unbody.service.ts

@@ -10,6 +10,7 @@ import {
   GoogleDocEnhanced,
   TextBlockEnhanced,
   ImageBlockEnhanced,
+  UnbodyGraphQlResponseTopics,
 } from '@/lib/unbody/unbody.types'
 
 import { UnbodyGraphQl } from '@/lib/unbody/unbody-content.types'
@@ -28,6 +29,7 @@ import {
 } from '@/types/data.types'
 import { getSearchBlocksQuery } from '@/queries/searchBlocks'
 import axios from 'axios'
+import { getTopicsQuery } from '@/queries/getTopics'
 
 const { UNBODY_API_KEY, UNBODY_LPE_PROJECT_ID } = process.env
 
@@ -480,6 +482,28 @@ class UnbodyService extends UnbodyClient {
       })
       .catch((e) => this.handleResponse([], e))
   }
+
+  getTopics = (published: boolean = true): Promise<ApiResponse<string[]>> => {
+    const query = getTopicsQuery(
+      published
+        ? {
+            where: Operands.WHERE_PUBLISHED(),
+          }
+        : {},
+    )
+
+    return this.request<UnbodyGraphQlResponseTopics>(query)
+      .then(({ data }) => {
+        if (!data || !data.Get || !data.Get.GoogleDoc)
+          return this.handleResponse([], 'No data')
+        const topics: string[] = data.Get.GoogleDoc.flatMap((item) => item.tags)
+        const uniqueTopics = topics.filter(
+          (item, index) => topics.indexOf(item) === index,
+        )
+        return this.handleResponse(uniqueTopics)
+      })
+      .catch((e) => this.handleResponse([], e))
+  }
 }
 
 const unbodyApi = new UnbodyService()