Add Carbon Footprint

src/pages/history.tsx

@@ -12,4 +12,4 @@ export default function History(): ReactElement {
       </div>
     </>
   )
-}
+}

src/pages/overview.tsx

@@ -1,11 +1,13 @@
-import { ReactElement } from 'react'
+import { ReactElement, useState } from 'react'
 
 export default function Overview(): ReactElement {
+  const [isHovered, setIsHovered] = useState(false);
   return (
     <>
       <h2 className="text-xl font-bold dark:text-slate-300">Overview</h2>
 
       <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 mt-8 gap-16 ">
+        {/* Real-Time summary */}
         <div className="flex flex-col gap-8 bg-white rounded-lg shadow p-7 dark:bg-slate-700 transition-all duration-500">
           <div>
             <h3 className="text-xl font-bold text-gray-800 dark:text-gray-200 mb-2">
@@ -77,6 +79,33 @@ export default function Overview(): ReactElement {
             </div>
           </div>
         </div>
+
+        {/* Carbon Footprint */}
+        <div className="flex flex-col gap-8 bg-white rounded-lg shadow p-7 dark:bg-slate-700 transition-all duration-500">
+          <div>
+            <h2 className="text-xl font-bold text-gray-800 dark:text-gray-200 mb-2">
+              Carbon Footprint
+            </h2>
+              <div className="relative" onMouseEnter={() => setIsHovered(true)} onMouseLeave={() => setIsHovered(false)}>
+                <button className="bg-sky-700 text-gray-800 px-4 py-2 rounded">More info</button>
+                {isHovered && (
+                  <div className="absolute bg-sky-700 text-gray-800 p-4 rounded shadow-md mt-2 dark:bg-white transition-all duration-500">
+                    <p>A carbon footprint is a measurement of the various greenhouse gases, such as carbon dioxide (CO2), methane (CH4),
+                        nitrous oxide (N2O), and others, caused by energy consumption. These gasses are combined into a common unit called carbon
+                        dioxide equivalent (CO2e), based on their global warming potential. The value for the carbon footprint is measured 
+                        by: kW * 1h * 0.5kg CO2/kWh
+                    </p>
+                  </div>
+                )}
+              </div>
+            <h4 className="text-lg text-gray-500 dark:text-slate-400 font-semibold">
+              Total Carbon Footprint
+            </h4>
+            <p className="mt-2 text-center text-5xl text-green-800 font-bold">
+              1kg CO2e
+            </p>
+          </div>
+        </div>
       </div>
     </>
   )