Add energy suggestion card

src/api/data.tsx

@@ -1,4 +1,4 @@
-import { Location, Sensor, Alert } from '../types'
+import { Location, Sensor, Alert, Suggestion } from '../types'
 
 export const LOCATIONS: { ruissalo: Location; educity: Location } = {
   ruissalo: {
@@ -51,3 +51,26 @@ export const ALERTS: Alert[] = [
     unread: false
   }
 ]
+
+export const SUGGESTIONS: Suggestion[] = [
+  {
+    id: 1,
+    title: 'Switch off lights',
+    text: 'Switch off lights and electrical appliances when you are not using them. Equipment such as computers, heaters and cooling units use a lot of energy, even when they are in low power or standby mode. Chargers that are plugged in but not in use also consume energy.'
+  },
+  {
+    id: 2,
+    title: 'Switch to LED lights',
+    text: 'Incandescent bulbs are inefficient and waste a lot of energy as heat. Switch to LED lights, which use 75% less energy and last 25 times longer.'
+  },
+  {
+    id: 3,
+    title: 'Air out your home',
+    text: 'Air out your home regularly, especially in the winter. This will reduce the need for heating and cooling, and improves the air quality in your home. Airing also reduces the humidity in the air, in turn improving the energy efficiency of your heating or cooling system.'
+  },
+  {
+    id: 4,
+    title: 'Conserve energy when cooking',
+    text: 'Use the right size of pot or pan for the food you are cooking. Use a lid to keep the heat in. Use the residual heat to finish cooking. Use the microwave instead of the oven when possible. Use the oven fan to circulate the heat. Use the oven light to check on your food instead of opening the door.'
+  }
+]

src/components/cards/energy_alerts.tsx

@@ -12,12 +12,10 @@ import {
 export default function EnergyAlerts(): ReactElement {
   return (
     <div className="flex flex-col gap-4 bg-white rounded-lg shadow p-7 dark:bg-slate-700">
-      <div className="mb-6">
-        <h3 className="flex gap-3 items-center text-xl font-bold text-gray-600 dark:text-gray-200 mb-2">
-          <BoltIcon className="w-5 h-5 text-yellow-400" />
-          Energy alerts
-        </h3>
-      </div>
+      <h3 className="flex gap-3 items-center text-xl font-bold text-gray-600 dark:text-gray-200 mb-6">
+        <BoltIcon className="w-5 h-5 text-yellow-400" />
+        Energy alerts
+      </h3>
       {ALERTS.map((alert) => (
         <div
           key={alert.id}

src/components/cards/energy_suggestions.tsx

@@ -1,12 +1,56 @@
-import { ReactElement } from 'react'
+import { ReactElement, useState } from 'react'
+
+import { SUGGESTIONS } from '../../api/data'
 
 export default function EnergySuggestions(): ReactElement {
+  const [currentIndex, setCurrentIndex] = useState(0)
+
+  const suggestion = SUGGESTIONS[currentIndex]
+
   return (
     <div className="flex flex-col gap-4 bg-white rounded-lg shadow p-7 dark:bg-slate-700">
-      <div className="mb-6">
-        <h3 className="flex gap-3 items-center text-xl font-bold text-gray-600 dark:text-gray-200 mb-2">
-          Energy suggestions
-        </h3>
+      <h3 className="flex gap-3 items-center text-xl font-bold text-gray-600 dark:text-gray-200 mb-6">
+        Energy suggestions
+      </h3>
+
+      <div className="mb-4">
+        {suggestion ? (
+          <>
+            <h4 className="mb-2 text-md font-semibold text-gray-800 dark:text-gray-200">
+              {suggestion.title}
+            </h4>
+            <span className="text-sm text-justify dark:text-white">
+              {suggestion.text}
+            </span>
+          </>
+        ) : (
+          <span className="text-sm text-gray-500 dark:text-gray-200">
+            No suggestions available
+          </span>
+        )}
+      </div>
+
+      <div className="flex flex-row justify-end gap-2">
+        <a
+          href="#"
+          className="py-2 px-3 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-gray-200 bg-white text-gray-800 shadow-sm hover:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none dark:bg-slate-900 dark:border-gray-700 dark:text-white dark:hover:bg-gray-800 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600 disabled:pointer-events-none"
+          onClick={(e) => {
+            e.preventDefault()
+            setCurrentIndex((currentIndex + 1) % SUGGESTIONS.length)
+          }}
+        >
+          Remind me later
+        </a>
+        <a
+          href="#"
+          className="py-3 px-4 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-lg border border-transparent bg-sky-700 text-white hover:bg-sky-900 disabled:opacity-50 disabled:pointer-events-none dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600"
+          onClick={(e) => {
+            e.preventDefault()
+            setCurrentIndex((currentIndex + 1) % SUGGESTIONS.length)
+          }}
+        >
+          Next suggestion
+        </a>
       </div>
     </div>
   )

src/types.tsx

@@ -43,3 +43,9 @@ export interface Alert {
   message: string
   unread: boolean
 }
+
+export interface Suggestion {
+  id: number
+  title: string
+  text: string
+}