GC stats

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";
 

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>
   );

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

+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;