maj social media

index.d.ts

@@ -84,13 +84,14 @@ interface ISocialMediaList {
   logo?: any,
   name?: string,
   url?: string,
-  className?: string
+  className?: string,
+  layout?:string
 }
 export function SocialMediaList(props: ISocialMediaList): JSX.Element;
 
 interface Ilogo {
   to?: string;
-  className?: string;
+  className: string;
   src?: string;
   title: string;
   image: any

src/components/core/SocialMediaList.tsx

 import React from 'react'
 import Logo from './Logo'
 import facebook from '../../icons/facebook.png';
-import gmail from '../../icons/gmail.png';
+import youtube from '../../icons/youtube.png';
 import linkedin from '../../icons/linkedin.png';
 import twitter from '../../icons/twitter.png';
+import instagram from '../../icons/instagram.png';
 
 interface ISocialMediaList {
     logo?: any,
     name?: string,
     url?: string,
     className?: string
+    layout?:string
 }
 
 const SocialMediaList = (props:ISocialMediaList) => {
-    const {logo, name, url, className="flex flex-col gap-y-2"} = props;
+    const classRow = "flex  gap-x-1"
+    const classCol = "flex flex-col gap-y-1"
+    const {logo, name, url, className="", layout = "col"} = props;
     const list = [
         {
             logo: facebook,
             name: "facebook"
         },
         {
-            logo: gmail,
-            name: "gmail"
+            logo: instagram,
+            name: "instagram"
         },
         {
             logo: linkedin,
@@ -31,20 +35,29 @@ const SocialMediaList = (props:ISocialMediaList) => {
             logo: twitter,
             name: "twitter"
         },
+        {
+            logo: youtube,
+            name: "youtube"
+        },
     ]
     return (
-        <div className={className}>
-            {
-                list.map((item:any, key:number) => {
-                    return (
-                        <div className={`border`} key={key}>
-                            <div className="">
-                                <Logo image={item.logo} title={item.name} className={"w-20"}/>
+        <div className='flex flex-col'>
+            <div>
+                <h3 className='font-bold pb-3'>Résaux sociaux</h3>    
+            </div>    
+            <div className={`${layout == "row" ? classRow : classCol}`}>
+                {
+                    list.map((item:any, key:number) => {
+                        return (
+                            <div className={`pb-0`} key={key}>
+                                <div className={`tooltip ${layout == "row" ? 'tooltip-bottom' : 'tooltip-right'} `} data-tip={item.name}>
+                                    <Logo image={item.logo} className={"w-10 h-10"}/>
+                                </div>
                             </div>
-                        </div>
-                    )
-                })
-            }
+                        )
+                    })
+                }
+            </div>
         </div>
     )
 }