Merge pull request #23 from dataforgoodfr/graph-title

feat: update dashboard titles position with graph
dataforgoodfr · May 22, 2024 · 0714668 · 0714668
2 parents 206b104 + d02a985
commit 0714668
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 47 deletions.
diff --git a/src/app/dashboard/page.tsx b/src/app/dashboard/page.tsx
@@ -5,7 +5,6 @@ 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";
 import JoinBlock from "@/components/JoinBlock";
@@ -265,7 +264,7 @@ const TopCountriesSection = () => {
 
 // const SalmonConsumptionSection = () => {
 //   return (
-//     <CustomDashboardSection
+//     <DashboardSection
 //       title="Consommation de saumon"
 //       id="intro-consumption"
 //       content="Les États-Unis sont les plus gros consommateurs de saumon, suivis par le Japon et la Russie. Les pays européens sont aussi d’importants consommateurs saumon, la France étant en tête de proue avec une consommation élevée qui atteint 4,4kg/an/personne. "
@@ -393,7 +392,7 @@ const LandPlantsSection = () => {
 
 // const SalmonConsumptionBisSection = () => {
 //   return (
-//     <CustomDashboardSection
+//     <DashboardSection
 //       title="Consommation"
 //       id="companies-consumption"
 //       mainContent="Les États-Unis sont de loin les plus gros consommateurs de saumon, suivis par le Japon et la Russie. Les pays européens sont également d’importants consommateurs de ce poisson. La consommation de saumon par habitant pour ces grands pays est d'environ 2 kg/personne/an et peut atteindre des valeurs supérieures à 5 kg/personne/an."
@@ -405,7 +404,7 @@ const LandPlantsSection = () => {
 
 const DeforestationSection = () => {
   return (
-    <CustomDashboardSection
+    <DashboardSection
       title="Déforestation"
       src="/images/deforestation.webp"
       id="deforestation"
@@ -439,7 +438,7 @@ const AntibioticSection = () => {
 
 const MicroplasticSection = () => {
   return (
-    <CustomDashboardSection
+    <DashboardSection
       title="Microplastique"
       src="/images/microplastics.webp"
       id="microplastics"
@@ -453,7 +452,7 @@ const MicroplasticSection = () => {
 
 const StressOnshoreSection = () => {
   return (
-    <CustomDashboardSection
+    <DashboardSection
       title="Densité / stress dans usine à terre"
       src="/images/stress.webp"
       id="stress-onshore"
@@ -490,7 +489,7 @@ Cette valeur est extrapolée à partir des émissions de 9 des plus grands produ
 
 const SocialCarbonSection = () => {
   return (
-    <CustomDashboardSection
+    <DashboardSection
       title="Impact carbone"
       src="/images/social-carbon.webp"
       id="social-carbon"

diff --git a/src/components/CustomDashboardSection.tsx b/src/components/CustomDashboardSection.tsx
diff --git a/src/components/DashboardSection.tsx b/src/components/DashboardSection.tsx
@@ -1,4 +1,6 @@
+import clsx from "clsx";
 import dynamic from "next/dynamic";
+import Image from "next/image";
 import React, { useEffect, useState } from "react";
 import { ReactNode } from "react";
 
@@ -11,14 +13,19 @@ const DashboardSection = ({
   title,
   id,
   mainContent,
+  className,
   content,
   cta,
+  src,
+  ...rest
 }: {
-  title?: string | undefined;
+  title?: string;
   mainContent?: string;
-  content?: string | undefined;
+  className?: string;
+  content?: string;
   id: string;
-  cta?: ReactNode | undefined;
+  cta?: ReactNode;
+  src?: string;
 }) => {
   const [chartData, setChartData] = useState({
     data: [],
@@ -27,6 +34,8 @@ const DashboardSection = ({
 
   const [isLoading, setIsLoading] = useState(true);
   useEffect(() => {
+    if (src) return;
+
     const fetchGraphData = async () => {
       if (id.length > 0) {
         const response = await fetchData("graphs", id);
@@ -35,24 +44,35 @@ const DashboardSection = ({
       }
     };
     fetchGraphData();
-  }, [id]);
+  }, [id, src]);
 
   if (!chartData) {
     return <></>;
   }
 
   return (
-    <div className="p-6 md:p-12">
-      <div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-[1fr_2fr] max-w-[1500px] mx-auto">
+    <div
+      className={clsx(className, "p-6 md:p-12 max-w-[1596px] mx-auto")}
+      {...rest}
+    >
+      <h3 className="h3 text-red1 mb-4 lg:mb-8 max-w-screen-md">{title}</h3>
+      <div className="grid gap-4 grid-cols-1 lg:grid-cols-2 xl:grid-cols-[1fr_2fr]">
         <div>
-          <h3 className="h3 text-red1 py-8">{title}</h3>
           <p className="font-semibold">{mainContent}</p>
           <p className="py-7">{content}</p>
 
           {cta && <div className="text-center py-8">{cta}</div>}
         </div>
         <div className="self-center min-h-[300px] overflow-y-auto h-full text-center">
-          {id && isLoading ? (
+          {src ? (
+            <Image
+              src={src}
+              className="block mx-auto object-contain max-w-full"
+              alt=""
+              width={700}
+              height={300}
+            />
+          ) : id && isLoading ? (
             <p className="text-xl text-center">Loading...</p>
           ) : (
             <DashboardChart