diff --git a/index.js b/index.js
index 9db069a87581a40fa38d6b86f6e65cb30089b871..dac461c8531508acb4219ab2ed5a3e67440ea2ce 100644
--- a/index.js
+++ b/index.js
@@ -13,6 +13,7 @@ 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 Stats} from "./src/components/Stats";
export { default as CardList } from "./src/components/core/CardList";
export {default as Stats} from "./src/components/Stats";
diff --git a/src/pages-doc/doc/core/index.tsx b/src/pages-doc/doc/core/index.tsx
index 03fe2eb1228fd3b1b5d5ed62138dcb85b622b8f2..ea6c7e6e1540cd90792f341da596fabf7bfc8ee1 100644
--- a/src/pages-doc/doc/core/index.tsx
+++ b/src/pages-doc/doc/core/index.tsx
@@ -29,6 +29,8 @@ function index(): ReactElement {
<Link to="/doc/core/menu">Menu</Link>
<br></br>
<Link to="/doc/core/image">Image</Link>
+ <br></br>
+ <Link to="/doc/stats">Stats</Link>
</div>
</Content>
);
diff --git a/src/pages-doc/doc/core/stats.tsx b/src/pages-doc/doc/core/stats.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..431550f2e9bbe3a8f024b0321167513ac93c926e
--- /dev/null
+++ b/src/pages-doc/doc/core/stats.tsx
@@ -0,0 +1,163 @@
+import React, { ReactElement } from "react";
+import { Link } from "gatsby";
+
+import { Content } from "@onegeo/gatsby-theme-onegeo";
+import { Stats } from "@onegeo/gatsby-theme-onegeo";
+
+function button(): ReactElement {
+ return (
+ <Content>
+ <div className="prose">
+ <Link to="/doc/core">Retour</Link>
+
+ <h1>Stats</h1>
+ <h2>Props</h2>
+ <div className="mockup-code">
+ <pre>
+ <code>
+ {`interface Props {
+ children?: React.ReactNode;
+ className?: string;
+ icon?: JSX.Element;
+ title?: string;
+ value?: string;
+ desc?: string;
+ iconColor?: string;
+ valueColor?: string;
+ descColor?: string;
+}`}
+ </code>
+ </pre>
+ </div>
+
+ <h2>Example</h2>
+ </div>
+ <div className="flex gap-6 m-4">
+ <h2>Simple stat :</h2>
+ <Stats title="Simple stat" value="99,9" desc="Without icon" />
+ <Stats
+ title="Simple stat"
+ value="99,9"
+ desc="With icon"
+ icon={
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ fill="none"
+ viewBox="0 0 24 24"
+ className="inline-block w-8 h-8 stroke-current"
+ >
+ <path
+ strokeLinecap="round"
+ strokeLinejoin="round"
+ strokeWidth="2"
+ d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"
+ ></path>
+ </svg>
+ }
+ />
+ </div>
+ <div className="flex gap-6 m-4">
+ <h2>Stat with background color :</h2>
+ <Stats
+ className="bg-primary text-primary-content"
+ title="Simple stat"
+ value="99,9"
+ desc="With bg color"
+ />
+ <Stats
+ className="bg-secondary text-secondary-content"
+ title="Simple stat"
+ value="99,9"
+ desc="With bg color"
+ />
+ </div>
+ <div className="flex gap-6 m-4">
+ <h2>Stat with colored value :</h2>
+ <Stats
+ title="Simple stat"
+ value="99,9"
+ desc="Colored value"
+ valueColor="text-primary"
+ />
+ <Stats
+ title="Simple stat"
+ value="99,9"
+ desc="Colored value"
+ valueColor="text-secondary"
+ />
+ </div>
+ <div className="flex gap-6 m-4">
+ <h2>Stat with colored description :</h2>
+ <Stats
+ title="Simple stat"
+ value="99,9"
+ desc="Colored description"
+ descColor="text-primary"
+ />
+ <Stats
+ title="Simple stat"
+ value="99,9"
+ desc="Colored description"
+ descColor="text-secondary"
+ />
+ </div>
+ <div className="flex gap-6 m-4">
+ <h2>Stat with colored icon :</h2>
+ <Stats
+ title="Simple stat"
+ value="99,9"
+ desc="Colored icon"
+ iconColor="text-primary"
+ icon={
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ fill="none"
+ viewBox="0 0 24 24"
+ className="inline-block w-8 h-8 stroke-current"
+ >
+ <path
+ strokeLinecap="round"
+ strokeLinejoin="round"
+ strokeWidth="2"
+ d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"
+ ></path>
+ </svg>
+ }
+ />
+ <Stats
+ title="Simple stat"
+ value="99,9"
+ desc="Colored icon"
+ iconColor="text-secondary"
+ icon={
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ fill="none"
+ viewBox="0 0 24 24"
+ className="inline-block w-8 h-8 stroke-current"
+ >
+ <path
+ strokeLinecap="round"
+ strokeLinejoin="round"
+ strokeWidth="2"
+ d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"
+ ></path>
+ </svg>
+ }
+ />
+ </div>
+ <div className="flex gap-6 m-4">
+ <h2>Stat with element :</h2>
+ <Stats title="Simple stat" value="99,9" desc="With element">
+ <a href="https://daisyui.com/components/button/" className="btn btn-sm btn-success">Button</a>
+ </Stats>
+ </div>
+ <div className="prose">
+ <h2>More example</h2>
+ <a href="https://daisyui.com/components/stat/">Daisy UI</a>
+ </div>
+ </Content>
+ );
+}
+
+export default button;