Merge pull request #19 from dataforgoodfr/dashboard-calculator

feat(dashboard): init calculator component

README.md

@@ -20,13 +20,15 @@ yarn dev
 
 Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. You can start editing the page by modifying `src/pages/index.tsx`.
 
-### 4. Change defaults
+### 4. Build and test
 
-There are some things you need to change including title, urls, favicons, etc.
+Run the followed command:
 
-Find all comments with !STARTERCONF, then follow the guide.
-
-Don't forget to change the package name in package.json
+- Build the project: `yarn build`
+- Launch linter: `yarn lint:strict`
+- Launch Typecheck: `yarn typecheck`
+- Launch Prettier: `yarn format:check`
+- Launch Jest: `yarn test`
 
 ### 5. Commit Message Convention
 

src/app/dashboard/page.tsx

@@ -4,6 +4,7 @@ import dynamic from "next/dynamic";
 import React, { useEffect, useState } from "react";
 import "@/lib/env";
 
+import Calculator from "@/components/Calculator";
 import CustomDashboardSection from "@/components/CustomDashboardSection";
 import DashboardSection from "@/components/DashboardSection";
 import IntroBlock from "@/components/IntroBlock";
@@ -133,6 +134,23 @@ const DashboardPage = () => {
     <>
       <IntroBlock title="Les chiffres derrière l’histoire" />
       <Summary links={summary} />
+
+      <Calculator
+        data={[
+          { multiplicator: 18, label: "saumons abattus" },
+          {
+            multiplicator: 8107,
+            label: "poissons fourrages pêchés pour alimenter les saumons",
+          },
+          { multiplicator: 0.5, label: "tonnes de CO2 émis par l'industrie" },
+          {
+            multiplicator: 618,
+            label:
+              "Euros de chiffre d'affaire pour les entreprises leadeurs du marché",
+          },
+        ]}
+      />
+
       <section>
         <TitleBlock id="intro" title="Intro" />
         <SalmonCollapseSection />

src/components/Calculator.tsx

@@ -0,0 +1,58 @@
+import clsx from "clsx";
+import React, { useEffect, useState } from "react";
+
+type CalculatorProps = {
+  data: {
+    multiplicator: number;
+    label: string;
+  }[];
+  className?: string;
+};
+
+const Calculator = ({ data, className, ...rest }: CalculatorProps) => {
+  const [seconds, setSeconds] = useState(0);
+
+  useEffect(() => {
+    const timer = setInterval(() => {
+      setSeconds(seconds + 1);
+    }, 1000);
+
+    return () => clearInterval(timer);
+  });
+
+  if (!data.length) {
+    return <></>;
+  }
+
+  return (
+    <div
+      className={clsx(
+        "p-6 md:p-12 max-w-[1500px] mx-auto text-center",
+        className,
+      )}
+      {...rest}
+    >
+      <h2>
+        Voici les impacts de l'industrie du saumon dans le monde depuis que vous
+        avez ouvert cette page web.
+      </h2>
+      <div className="h4 pb-6 md:pb-12 text-red1">
+        {seconds} {seconds > 1 ? "secondes" : "seconde"}
+      </div>
+
+      <ul className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 lg:gap-12">
+        {data.map((element, key) => (
+          <li key={key}>
+            <span className="h3 block p-2 md:p-4 text-red1">
+              {new Intl.NumberFormat("fr").format(
+                element.multiplicator * (seconds + 1),
+              )}
+            </span>
+            <span className="">{element.label}</span>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+};
+export default Calculator;

src/components/Edito.tsx

@@ -3,7 +3,7 @@ import Image from "next/image";
 import Link from "next/link";
 import React from "react";
 
-const IconCard = ({
+const Edito = ({
   className,
   title,
   image,
@@ -101,4 +101,4 @@ const IconCard = ({
     </div>
   );
 };
-export default IconCard;
+export default Edito;