Merge branch 'feat-logo' into 'main'

Feat logo

See merge request onegeo/gatsby-theme-onegeo!5

index.d.ts

@@ -54,6 +54,15 @@ export function Link(props: LinkProps): JSX.Element;
 interface SearchProps {}
 export function Search(props: SearchProps): JSX.Element;
 
+interface Ilogo {
+  to?: string;
+  className?: string;
+  src?: string;
+  title: string;
+  image: any
+}
+export function Logo(props:Ilogo): JSX.Element;
+
 interface Service {
   title: string;
   subtitle: string;

index.js

@@ -12,3 +12,6 @@ export { default as Search } from "./src/components/core/Search";
 
 // Feature components
 export { default as Hero } from "./src/components/Hero";
+
+// Logo components
+export { default as Logo } from "./src/components/core/Logo";

src/components/core/Logo.tsx

 import React from "react";
 import { Link } from "gatsby";
 import { StaticImage } from "gatsby-plugin-image";
+
 // import logo from "../images/logo-egeo.png";
 
 interface Props {
   to?: string;
   className?: string;
   src?: string;
+  title: string;
+  image: any
 }
 
 const Logo = (props: Props) => {
-  const { to = "#", className = "" } = props;
+  const { to = "#", className = "", title, image } = props;
 
   return (
-    <Link to={to} className={className}>
-      <StaticImage
-        src="../images/logo-egeo.png"
-        alt="Logo"
-        height={40}
-        className="m-2"
-      />
-    </Link>
+    <div className="flex justify-center flex-col items-center w-[150px]">
+      <Link to={to} className={className}>
+        <img 
+          src={image}
+          alt="Logo"
+          height={40}
+          className="my-2"
+        />
+      </Link>
+      <div>{title}</div>
+    </div>
   );
 };
 

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

@@ -14,6 +14,8 @@ function index(): ReactElement {
         <Link to="/doc/core/card">Card</Link>
         <br></br>
         <Link to="/doc/core/hero">Hero</Link>
+        <br></br>
+        <Link to="/doc/core/logo">Logo</Link>
       </div>
     </Content>
   );

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

+import React from 'react'
+import { Content } from "@onegeo/gatsby-theme-onegeo";
+import { Logo } from "@onegeo/gatsby-theme-onegeo";
+import { Link } from "gatsby";
+import image from "../../../images/logo-egeo.png"
+
+const logo = () => {
+  return (
+    <Content>
+      <div className="prose">
+        <Link to="/doc/core">Retour</Link>
+
+        <h1>Logo</h1>
+        <h2>Props</h2>
+        <div className="mockup-code">
+          <pre>
+            <code>
+              {`interface Props {
+  to?: string;
+  className?: string;
+  src?: string;
+  title: string;
+  image: any
+}`}
+            </code>
+          </pre>
+        </div>
+
+        <h2>Example</h2>
+      </div>
+      <div className="flex gap-6 m-4">
+        <Logo title="My Logo" image={image} />
+      </div>
+    </Content>
+  )
+}
+
+export default logo