social media list component

index.d.ts

@@ -54,6 +54,14 @@ export function Link(props: LinkProps): JSX.Element;
 interface SearchProps {}
 export function Search(props: SearchProps): JSX.Element;
 
+interface ISocialMediaList {
+  logo?: any,
+  name?: string,
+  url?: string,
+  className?: string
+}
+export function SocialMediaList(props: ISocialMediaList): JSX.Element;
+
 interface Ilogo {
   to?: string;
   className?: string;

index.js

@@ -16,3 +16,6 @@ export { default as Hero } from "./src/components/Hero";
 
 // Logo components
 export { default as Logo } from "./src/components/core/Logo";
+
+// SocialMediaList components
+export { default as SocialMediaList } from "./src/components/core/socialmedialist";

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 linkedin from '../../icons/linkedin.png';
+import twitter from '../../icons/twitter.png';
+
+interface ISocialMediaList {
+    logo?: any,
+    name?: string,
+    url?: string,
+    className?: string
+}
+
+const SocialMediaList = (props:ISocialMediaList) => {
+    const {logo, name, url, className="flex flex-col gap-y-2"} = props;
+    const list = [
+        {
+            logo: facebook,
+            name: "facebook"
+        },
+        {
+            logo: gmail,
+            name: "gmail"
+        },
+        {
+            logo: linkedin,
+            name: "linkedin"
+        },
+        {
+            logo: twitter,
+            name: "twitter"
+        },
+    ]
+    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>
+                        </div>
+                    )
+                })
+            }
+        </div>
+    )
+}
+
+export default SocialMediaList

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

@@ -18,6 +18,8 @@ function index(): ReactElement {
         <Link to="/doc/core/map">Map</Link>
         <br></br>
         <Link to="/doc/core/logo">Logo</Link>
+        <br></br>
+        <Link to="/doc/core/socialmedialist">List Social Media</Link>
       </div>
     </Content>
   );

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

+import React from 'react'
+import { Content } from "@onegeo/gatsby-theme-onegeo";
+import { SocialMediaList } from "@onegeo/gatsby-theme-onegeo";
+import { Link } from "gatsby";
+
+
+
+const socialmedialist = () => {
+  return (
+    <Content>
+      <div className="prose">
+        <Link to="/doc/core">Retour</Link>
+
+        <h1>List resaux sociaux</h1>
+        <h2>Props</h2>
+        <div className="mockup-code">
+          <pre>
+            <code>
+              {`
+              interface ISocialMediaList {
+                logo?: any,
+                name?: string,
+                url?: string,
+                className?: string
+            }
+
+            const list = [
+                {
+                    logo: facebook,
+                    name: "facebook"
+                },
+                {
+                    logo: gmail,
+                    name: "gmail"
+                },
+                {
+                    logo: linkedin,
+                    name: "linkedin"
+                },
+                {
+                    logo: twitter,
+                    name: "twitter"
+                },
+            ]
+
+              query MyQuery {
+                api {
+                  partners {
+                    id
+                    logo_url
+                    name
+                    url
+                    created_at
+                    updated_at
+                  }
+                }
+              }
+              `}
+            </code>
+          </pre>
+        </div>
+
+        <h2>Example</h2>
+      </div>
+      <div className="flex gap-6 m-4">
+        <SocialMediaList  />
+      </div>
+    </Content>
+  )
+}
+
+export default socialmedialist