Add Tooltips to the logos in the 'Our Allies' section of the About page

frontend/containers/about/our-allies/component.tsx

@@ -5,6 +5,7 @@ import cx from 'classnames';
 import Image from 'next/image';
 
 import { useAlliesLogos, useSupportedByLogos } from './data';
+import Logo from './logo/component';
 
 export const OurAllies = () => {
   const alliesLogos = useAlliesLogos();
@@ -27,16 +28,7 @@ export const OurAllies = () => {
                 })}
               >
                 {row.map((logo) => {
-                  return (
-                    <span key={logo.src}>
-                      <Image
-                        src={logo.src}
-                        width={logo.width}
-                        height={logo.height}
-                        alt={logo.alt}
-                      />
-                    </span>
-                  );
+                  return <Logo key={logo.src} logo={logo} />;
                 })}
               </div>
             );
@@ -50,11 +42,7 @@ export const OurAllies = () => {
         <div className="flex flex-col mt-8">
           <div className="flex flex-wrap items-center justify-center gap-6">
             {supportedByLogos.map((logo) => {
-              return (
-                <span key={logo.src}>
-                  <Image src={logo.src} width={logo.width} height={logo.height} alt={logo.alt} />
-                </span>
-              );
+              return <Logo key={logo.src} logo={logo} />;
             })}
           </div>
         </div>

frontend/containers/about/our-allies/logo/component.tsx

@@ -0,0 +1,29 @@
+import { FC } from 'react';
+
+import Image from 'next/image';
+
+import Tooltip from 'components/tooltip';
+
+import { OurAlliesLogoType } from './';
+
+export const OurAlliesLogo: FC<OurAlliesLogoType> = ({ logo }) => {
+  return (
+    <span>
+      <Tooltip
+        arrow
+        arrowClassName="bg-black"
+        content={
+          <div className="max-w-xs p-2 font-sans text-sm font-normal text-white bg-black rounded-sm">
+            {logo.alt}
+          </div>
+        }
+      >
+        <span className="flex py-1 sm:py-0">
+          <Image src={logo.src} width={logo.width} height={logo.height} alt={logo.alt} />
+        </span>
+      </Tooltip>
+    </span>
+  );
+};
+
+export default OurAlliesLogo;

frontend/containers/about/our-allies/logo/index.ts

@@ -0,0 +1,2 @@
+export type { OurAlliesLogoType } from './types';
+export { default } from './component';

frontend/containers/about/our-allies/logo/types.ts

@@ -0,0 +1,8 @@
+export type OurAlliesLogoType = {
+  logo: {
+    src: string;
+    width: number;
+    height: number;
+    alt: string;
+  };
+};

frontend/containers/sdgs/component.tsx

@@ -23,7 +23,7 @@ export const SDGs: FC<SDGsProps> = ({ className, size = 'small', sdgs = [] }: SD
             arrowClassName="bg-black"
             content={
               <div className="max-w-xs p-2 font-sans text-sm font-normal text-white bg-black rounded-sm">
-                {sdg.name}
+                haha
               </div>
             }
           >