diff --git a/gatsby-config.js b/gatsby-config.js
index ed377f7e3f52fa09ad041ea0a2ba8be3c2bc2415..974c880a88000e0738d45fe6530160cc909226c6 100644
--- a/gatsby-config.js
+++ b/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`,
diff --git a/index.d.ts b/index.d.ts
index d7c46ed42e67f43ab2a327a9dc008f205a77c320..941cfa48e81e495f07566bbf81432e1e8a727256 100644
--- a/index.d.ts
+++ b/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';
diff --git a/index.js b/index.js
index ce84a0100ac298bd0b8ee7c8e091b3a978c25a91..af2b2b1aa1bd8fd16404ab1634e35046c8917999 100644
--- a/index.js
+++ b/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";
diff --git a/src/components/Feature.tsx b/src/components/Feature.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..582d3ceb98e924e5b1fcce469e1d5fe3eaec849e
--- /dev/null
+++ b/src/components/Feature.tsx
@@ -0,0 +1,123 @@
+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
diff --git a/src/components/core/Menu.tsx b/src/components/core/Menu.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..0c482e83dcc45baa7ca51e6c1ed87578c1b96102
--- /dev/null
+++ b/src/components/core/Menu.tsx
@@ -0,0 +1,73 @@
+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;
diff --git a/src/components/core/MenuMobile.tsx b/src/components/core/MenuMobile.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..0d566f56c10b66cc41527bdf8eb42c00fc795954
--- /dev/null
+++ b/src/components/core/MenuMobile.tsx
@@ -0,0 +1,74 @@
+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;
diff --git a/src/pages-doc/doc/core/feature.tsx b/src/pages-doc/doc/core/feature.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..fdf05e483b40bcee8db9cbfd932d8e9aeada1d4f
--- /dev/null
+++ b/src/pages-doc/doc/core/feature.tsx
@@ -0,0 +1,94 @@
+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
diff --git a/src/pages-doc/doc/core/index.tsx b/src/pages-doc/doc/core/index.tsx
index f663cf35efdf59bc7bbf345f7fa23b6ae9a2965a..28b7eaa80b0a60375a9e79024014b09fb659698a 100644
--- a/src/pages-doc/doc/core/index.tsx
+++ b/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>
);
diff --git a/src/pages-doc/doc/core/menu.tsx b/src/pages-doc/doc/core/menu.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..270f5dd90686446b725001102bb57e9822ba27fe
--- /dev/null
+++ b/src/pages-doc/doc/core/menu.tsx
@@ -0,0 +1,65 @@
+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