change place map of list reseaux socieaux

index.d.ts

@@ -81,12 +81,12 @@ interface SearchProps {}
 export function Search(props: SearchProps): JSX.Element;
 
 interface ISocialMediaList {
-  // logo?: any,
-  // name?: string,
-  // url?: string,
+  logo?: any,
+  name?: string,
+  url?: string,
   // className?: string,
   layout?:string
-  dataList: any
+  // dataList: any
 }
 export function SocialMediaList(props: ISocialMediaList): JSX.Element;
 

src/components/SocialMediaList.tsx

-import React from 'react'
-import Logo from './core/Logo'
-import facebook from '../images/facebook.svg';
-import google from '../images/google.svg';
-import linkedin from '../images/linkedin.svg';
-import twitter from '../images/twitter.svg';
-import instagram from '../images/instagram.svg';
+import React from "react";
+import Logo from "./core/Logo";
 
 interface ISocialMediaList {
-    layout?:string,
-    dataList: any
+  layout?: string;
+  name: string;
+  logo: any;
+  url: string;
 }
 
-const SocialMediaList = (props:ISocialMediaList) => {
-    const classRow = "flex  gap-x-1"
-    const classCol = "flex flex-col gap-y-1"
-    const {layout, dataList} = props;
+const SocialMediaList = (props: ISocialMediaList) => {
+  const { layout, name, logo, url } = props;
 
-    return (
-        <div className='flex flex-col'>
-            <div>
-                <h3 className='font-bold pb-3'>Réseaux sociaux</h3>    
-            </div>    
-            <div className={`${layout == "row" ? classRow : classCol}`}>
-                {
-                    dataList.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={`${process.env.DIRECTUS_URL}assets/${item.logo.id}`}  to={item.url} className={"w-10 h-10"} classImg={"my-2 h-10 w-10"}/>
-                                </div>
-                            </div>
-                        )
-                    })
-                }
-            </div>
-        </div>
-    )
-}
+  return (
+    <div
+      className={`tooltip ${
+        layout == "row" ? "tooltip-bottom" : "tooltip-right"
+      } `}
+      data-tip={name}
+    >
+      <Logo
+        image={logo}
+        to={url}
+        className={"w-10 h-10"}
+        classImg={" h-10 w-10"}
+      />
+    </div>
+  );
+};
 
-export default SocialMediaList
+export default SocialMediaList;

src/components/core/Logo.tsx

@@ -23,7 +23,7 @@ const Logo = (props: Props) => {
         <img 
           src={image}
           alt="Logo"
-          height={40}
+          // height={40}
           className={classImg}
         />
       </Link>

src/pages-doc/doc/core/socialmedialist.tsx

@@ -28,16 +28,12 @@ const socialmedialist = ({ data }: PageProps<Data>): ReactElement => {
             <code>
               {`
               interface ISocialMediaList {
-                dataList?: any
+                logo?: any,
+                name?: string,
+                url?: string,
                 layout?:string
               }
 
-            dataList = {
-              name,
-              url,
-              logo,
-              type
-            }
 
             query {
               directus {
@@ -59,12 +55,40 @@ const socialmedialist = ({ data }: PageProps<Data>): ReactElement => {
 
         <h2>Example</h2>
       </div>
-      <div className="flex gap-6 m-4">
-        <SocialMediaList dataList={dataList} layout="row" />
+      <h2>reseaux sociaux</h2>
+      <div className="flex gap-2 m-4">
+        {dataList.map((item: any) => {
+          return (
+            <div key={item.id}>
+              <SocialMediaList
+                name={item.name}
+                url={item.url}
+                logo={`${process.env.DIRECTUS_URL}assets/${item.logo.id}`}
+                layout="row"
+              />
+            </div>
+          );
+        })}
       </div>
-      <div className="flex gap-6 m-4">
-        <SocialMediaList dataList={dataList} layout="col" />
+
+      <h2>reseaux sociaux</h2>
+      <div className="flex flex-col gap-2 m-4">
+        {dataList.map((item: any) => {
+          return (
+            <div key={item.id}>
+              <SocialMediaList
+                name={item.name}
+                url={item.url}
+                logo={`${process.env.DIRECTUS_URL}assets/${item.logo.id}`}
+                layout="col"
+              />
+            </div>
+          );
+        })}
       </div>
+      {/* <div className="flex gap-6 m-4">
+        <SocialMediaList dataList={dataList} layout="col" />
+      </div> */}
     </Content>
   );
 };