diff --git a/README.md b/README.md index c41ab39f8..07320607a 100644 --- a/README.md +++ b/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 diff --git a/src/app/dashboard/page.tsx b/src/app/dashboard/page.tsx index 203c2e7ac..b9cf2e60c 100644 --- a/src/app/dashboard/page.tsx +++ b/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 = () => { <> + + +
diff --git a/src/components/Calculator.tsx b/src/components/Calculator.tsx new file mode 100644 index 000000000..a34a13ad6 --- /dev/null +++ b/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 ( +
+

+ Voici les impacts de l'industrie du saumon dans le monde depuis que vous + avez ouvert cette page web. +

+
+ {seconds} {seconds > 1 ? "secondes" : "seconde"} +
+ +
    + {data.map((element, key) => ( +
  • + + {new Intl.NumberFormat("fr").format( + element.multiplicator * (seconds + 1), + )} + + {element.label} +
  • + ))} +
+
+ ); +}; +export default Calculator; diff --git a/src/components/Edito.tsx b/src/components/Edito.tsx index f6b72d0c1..c0f8b08ad 100644 --- a/src/components/Edito.tsx +++ b/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 = ({ ); }; -export default IconCard; +export default Edito;