fix conflicts

gatsby-config.js

@@ -83,7 +83,8 @@ module.exports = {
         },
       },
     },
-    /*{
+    /*
+    {
       resolve: `gatsby-plugin-typesense`,
       options: {
         publicDir: `./public`, // Required
@@ -144,8 +145,8 @@ module.exports = {
           ],
         },
       },
-    }, */
-
+    },
+    */
     // this (optional) plugin enables Progressive Web App + Offline functionality
     // To learn more, visit: https://gatsby.dev/offline
     // `gatsby-plugin-offline`,

index.d.ts

@@ -2,6 +2,7 @@ declare module "*";
 
 import { IGatsbyImageData } from "gatsby-plugin-image";
 
+
 interface LayoutProps {
   children: React.ReactNode;
   UserMenu?: React.ReactNode;
@@ -37,7 +38,7 @@ export function Button(props: ButtonProps): JSX.Element;
 interface CardProps {
   title?: string;
   content?: string;
-  image?: string | IGatsbyImageData;
+  image?: string;
   to?: string;
   anime?: boolean;
   layout?: "top" | "left";
@@ -79,6 +80,12 @@ export function Carousel(props: Image): JSX.Element;
 interface SearchProps {}
 export function Search(props: SearchProps): JSX.Element;
 
+interface IMenu {}
+export function Menu(props: IMenu): JSX.Element;
+
+interface IMenuMobile {}
+export function MenuMobile(props: IMenu): JSX.Element;
+
 interface Ilogo {
   to?: string;
   className?: string;
@@ -112,6 +119,31 @@ interface HeroProps {
  */
 export function Hero(props: HeroProps): JSX.Element;
 
+interface MapProps {
+  idMap: number;
+}
+export function Map(props: MapProps): JSX.Element;
+
+interface FeatureProps {
+  title?: string;
+  content?: string;
+  image?: string | IGatsbyImageData;
+  idMap?: number;
+  layout?: 'left' | 'right';
+  backgroundImage?: string;
+  action?: {
+    title?: string;
+    to?: string;
+    className?: string;
+  };
+  custom?: JSX.Element;
+}
+export function Feature(props: FeatureProps): JSX.Element;
+interface ImageProps {
+  image?: string | IGatsbyImageData;
+  classname?: string;
+}
+export function Image(props: ImageProps): JSX.Element;
 interface CardListProps {
   cards?: CardProps[];
   layout?: 'row' | 'col' | 'grid';

index.js

@@ -14,10 +14,12 @@ export { default as Badge } from "./src/components/core/Badge";
 export { default as Toc } from "./src/components/core/Toc";
 export { default as Map } from "./src/components/core/Map";
 export { default as Image } from "./src/components/core/Image";
+export { default as CardList } from "./src/components/core/CardList";
 
 // Feature components
 export { default as Hero } from "./src/components/Hero";
 export { default as News } from "./src/components/News";
+export { default as Feature } from "./src/components/Feature";
 
 //Carousel components
 export { default as Carousel } from "./src/components/core/Carousel";
@@ -25,3 +27,8 @@ export { default as Carousel } from "./src/components/core/Carousel";
 // Logo components
 export { default as Logo } from "./src/components/core/Logo";
 
+// Menu components
+export { default as Menu } from "./src/components/core/Menu";
+
+// Menu components
+export { default as MenuMobile } from "./src/components/core/MenuMobile";

src/components/Feature.tsx

+import React from "react";
+import { IGatsbyImageData } from "gatsby-plugin-image";
+
+import Image from "./core/Image";
+import Map from "./core/Map";
+import Button from "./core/Button";
+
+interface Props {
+  title?: string;
+  content?: string;
+  image?: string | IGatsbyImageData;
+  idMap?: number;
+  layout?: 'left' | 'right';
+  backgroundImage?: string;
+  action?: {
+    title?: string;
+    to?: string;
+    className?: string;
+  };
+  custom?: JSX.Element;
+}
+interface FeatureComponentProps {
+  image?: string | IGatsbyImageData;
+  idMap?: number;
+  custom?: JSX.Element;
+}
+
+
+const oClassName = {
+  'left' : {
+    'container': 'flex-col lg:flex-row',
+    'content': 'pt-10 lg:pl-10'
+  },
+  'right' : {
+    'container': 'flex-col-reverse lg:flex-row-reverse',
+    'content': 'pt-10 pb-10 lg:pr-10 lg:pb-0'
+  }
+}
+
+
+const FeatureComponent  = (props: FeatureComponentProps) => {
+  const {
+    image,
+    idMap,
+    custom
+  } = props;
+
+  if (idMap) {
+    return (
+      <>
+        <Map
+          idMap={idMap}
+        />
+      </>
+    )
+  }
+
+  if (image) {
+    return (
+      <>
+        <Image 
+          image={image}
+        />
+      </>
+    )
+  }
+
+  return (
+    <>
+      {custom && custom}
+    </>
+  );
+}
+
+
+const Feature = (props: Props) => {
+  const {
+    layout='left',
+    title='',
+    content='',
+    image,
+    idMap,
+    backgroundImage,
+    action,
+    custom
+  } = props;
+
+  const className = oClassName[layout];
+  const bTextOnly = ( ! (idMap || image || custom));
+  const classNameContent = (bTextOnly) ? 'grow' : `lg:w-1/2 ${className['content']}`;
+  const classNameBackground = (backgroundImage) ? "bg-[url('" + backgroundImage + "')] bg-cover bg-no-repeat bg-center " : '';
+
+  return (
+    <div className={`flex ${className['container']} ${classNameBackground}`}>
+      {
+        ! bTextOnly && (
+          <div className="h-[480px] lg:w-1/2">
+            <FeatureComponent 
+              idMap={idMap}
+              image={image}
+              custom={custom}
+            />
+          </div>
+        )
+      }
+      <div className={classNameContent}>
+        <h2 className="font-extrabold sm:text-4xl">{title}</h2>
+        <p className="text-xl leading-8 pt-10 text-justify">{content}</p>
+        {
+          action && (
+            <Button 
+              title={action.title}
+              to={action.to}
+              className={`mt-10 ${action.className}`}
+            />
+          )
+        }
+      </div>
+    </div>
+  );
+};
+
+export default Feature;
\ No newline at end of file

src/components/core/Menu.tsx

+import React from "react";
+
+const Menu = () => {
+  const menu = [
+    {
+      title: "Decouvrir",
+    },
+    {
+      title: "Actualités",
+    },
+    {
+      title: "A propos",
+    },
+    {
+      title: "Mentions légales",
+    },
+    {
+      title: "Parents",
+      subMenu: [
+        {
+          title: "sousmenu1",
+        },
+        {
+          title: "sousmenu2",
+        },
+      ],
+    },
+  ];
+
+  return (
+    <>
+        {/* MENU MOBILE */}
+        <ul className="menu menu-horizontal p-0">
+            {menu.map((item: any, key: number) => {
+                return (
+                <li key={key}>
+                    <a>
+                    {item.title}
+                    {item.subMenu && (
+                        <svg
+                        className="fill-current"
+                        xmlns="http://www.w3.org/2000/svg"
+                        width="20"
+                        height="20"
+                        viewBox="0 0 24 24"
+                        >
+                        <path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" />
+                        </svg>
+                    )}
+                    </a>
+                    {item.subMenu && (
+                    <ul className="p-2 z-50 bg-slate-200">
+                        {item.subMenu.map((itemsm: any, idx: number) => {
+                        return (
+                            <li key={idx}>
+                            <a className="text-neutral-content hover:bg-submenu active:bg-allsubmenu z-50">
+                                {itemsm.title}
+                            </a>
+                            </li>
+                        );
+                        })}
+                    </ul>
+                    )}
+                </li>
+                );
+            })}
+        </ul>
+        {/* END MENU MOBILE */}
+    </>
+  );
+};
+
+export default Menu;

src/components/core/MenuMobile.tsx

+import React from "react";
+
+const MenuMobile = () => {
+  const menu = [
+    {
+      title: "Decouvrir",
+    },
+    {
+      title: "Actualités",
+    },
+    {
+      title: "A propos",
+    },
+    {
+      title: "Mentions légales",
+    },
+    {
+      title: "Parents",
+      subMenu: [
+        {
+          title: "sousmenu1",
+        },
+        {
+          title: "sousmenu2",
+        },
+      ],
+    },
+  ];
+
+  return (
+    <>
+      {/* MENU CLASSIQUE */}
+      <ul
+        tabIndex={0}
+        className="menu menu-compact dropdown-content mt-3 p-2 shadow bg-base-100 rounded-box w-52 z-50"
+      >
+        {menu.map((item: any, key: number) => {
+          return (
+            <li key={key}>
+              <a>
+                {item.title}
+                {item.subMenu && (
+                  <svg
+                    className="fill-current"
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="24"
+                    height="24"
+                    viewBox="0 0 24 24"
+                  >
+                    <path d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z" />
+                  </svg>
+                )}
+              </a>
+              {item.subMenu && (
+                <ul className="p-2 z-10">
+                  {item.subMenu.map((itemsm: any, idx: number) => {
+                    return (
+                      <li key={idx}>
+                        <a>{itemsm.title}</a>
+                      </li>
+                    );
+                  })}
+                </ul>
+              )}
+            </li>
+          );
+        })}
+      </ul>
+      {/* END MENU CLASSIQUE */}
+    </>
+  );
+};
+
+export default MenuMobile;

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

+import React, { ReactElement } from "react";
+import { Link } from "gatsby";
+
+import { Content } from "@onegeo/gatsby-theme-onegeo";
+import { Feature } from "@onegeo/gatsby-theme-onegeo";
+
+function feature(): ReactElement {
+
+  return (
+    <Content>
+      <div className="prose">
+        <Link to="/doc/core">Retour</Link>
+
+        <h1>Feature</h1>
+        <h2>Props</h2>
+        <div className="mockup-code">
+          <pre>
+            <code>
+              {`
+interface FeatureProps {
+title?: string;
+content?: string;
+image?: string | IGatsbyImageData;
+idMap?: number;
+layout?: 'left' | 'right';
+backgroundImage?: string;
+action?: {
+  title?: string;
+  to?: string;
+  className?: string;
+};
+custom?: JSX.Element;
+}`}
+            </code>
+          </pre>
+        </div>
+
+        <h2>Example</h2>
+      </div>
+      <div className="mt-10">
+        <h1 className="text-2xl font-semibold p-4">Custom component</h1>
+        <Feature
+          title="Action"
+          content="Action description for the Button"
+          layout="left"
+          custom={<div>Custom component</div>}
+          action={{
+            to: '#',
+            title: 'Action'
+          }}
+        />
+      </div>
+      <div className="mt-10">
+        <h1 className="text-2xl font-semibold p-4">Image</h1>
+        <Feature
+          title="Action"
+          content="Action description for the Button"
+          layout="right"
+          image="https://fakeimg.pl/480x480/"
+          action={{
+            to: '#',
+            title: 'Action'
+          }}
+        />
+      </div>
+      <div className="mt-10">
+        <h1 className="text-2xl font-semibold p-4">Text only</h1>
+        <Feature
+          title="Action"
+          content="Action description for the Button"
+          action={{
+            to: '#',
+            title: 'Action'
+          }}
+        />
+      </div>
+      <div className="mt-10">
+        <h1 className="text-2xl font-semibold p-4">Map</h1>
+        <Feature
+          title="Action"
+          content="Action description for the Button"
+          action={{
+            to: '#',
+            title: 'Action'
+          }}
+          layout="left"
+          idMap={109}
+        />
+      </div>
+    </Content>
+  );
+}
+
+export default feature;
\ No newline at end of file

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

@@ -25,11 +25,16 @@ function index(): ReactElement {
         <br></br>
         <Link to="/doc/core/map">Map</Link>
         <br></br>
+        <Link to="/doc/core/feature">Feature</Link>
+        <br></br>
         <Link to="/doc/core/logo">Logo</Link>
         <br></br>
         <Link to="/doc/core/news">News</Link>
         <br></br>
+        <Link to="/doc/core/menu">Menu</Link>
+        <br></br>
         <Link to="/doc/core/image">Image</Link>
+
       </div>
     </Content>
   );

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

+import React from 'react'
+import { Content } from "@onegeo/gatsby-theme-onegeo";
+import { Menu, MenuMobile } from "@onegeo/gatsby-theme-onegeo";
+import { Link } from "gatsby";
+
+const menu = () => {
+  return (
+    <Content>
+      <div className="prose">
+        <Link to="/doc/core">Retour</Link>
+
+        <h1>Menu</h1>
+        <h2>Props</h2>
+        <div className="mockup-code">
+          <pre>
+            <code>
+              {`const menu = [
+    {
+      title: "Decouvrir",
+    },
+    {
+      title: "Actualités",
+    },
+    {
+      title: "A propos",
+    },
+    {
+      title: "Mentions légales",
+    },
+    {
+      title: "Parents",
+      subMenu: [
+        {
+          title: "sousmenu1",
+        },
+        {
+          title: "sousmenu2",
+        },
+      ],
+    },
+  ];`}
+            </code>
+          </pre>
+        </div>
+
+        <h2>Example</h2>
+      </div>
+      <div className='mt-5'>
+        <h3 className='underline underline-offset-1'>Menu classique</h3>
+        <div className="flex gap-6 m-4">
+          <Menu />
+        </div>
+      </div>
+
+      <div>
+        <h3 className='underline underline-offset-1'>Menu mobile</h3>
+        <div className="flex gap-6 m-4">
+          <MenuMobile />
+        </div>
+      </div>
+    </Content>
+  )
+}
+
+export default menu