From 23ebb8702567d03920297f2e702907d7ffcef8dc Mon Sep 17 00:00:00 2001
From: Michal Masrna <m.masrna1@gmail.com>
Date: Sun, 12 Nov 2023 15:20:05 +0100
Subject: [PATCH] Footer containing logos

---
 src/components/PageLayout/Footer/Footer.tsx | 27 ++++++++++++++++++---
 1 file changed, 23 insertions(+), 4 deletions(-)

diff --git a/src/components/PageLayout/Footer/Footer.tsx b/src/components/PageLayout/Footer/Footer.tsx
index e281d182..a166edae 100644
--- a/src/components/PageLayout/Footer/Footer.tsx
+++ b/src/components/PageLayout/Footer/Footer.tsx
@@ -1,16 +1,35 @@
+import {useQuery} from '@tanstack/react-query'
+import axios from 'axios'
 import {FC} from 'react'
 
+import {Loading} from '@/components/Loading/Loading'
+import {ILogo, Logo} from '@/components/PageLayout/Footer/Logo'
+
 import styles from './Footer.module.scss'
+import logoStyles from './Logo.module.scss'
 
 export const Footer: FC = () => {
+  const {
+    data: postsData,
+    isLoading: logosIsLoading,
+    error: postsError,
+  } = useQuery({
+    queryKey: ['cms', 'logo'],
+    queryFn: () => axios.get<ILogo[]>('/api/cms/logo'),
+  })
+  const logos = postsData?.data ?? []
+
   return (
     <div className={styles.footer}>
       <div className={styles.grid}>
         <div className={styles.content}>
-          <p>futo</p>
-          <p>futo</p>
-          <p>futo</p>
-          <p>futo</p>
+          <div className={logoStyles.logosRow}>
+            {logosIsLoading && <Loading />}
+            {logos.map((post) => (
+              <Logo key={post.id} {...post} />
+            ))}
+            {postsError && <p>{postsError.message}</p>}
+          </div>
         </div>
       </div>
     </div>