Add recommendation card UI

frontend/src/api/RecommendData.tsx

@@ -0,0 +1,18 @@
+import axios from 'axios';
+
+const fetchRecommendation = async (
+  data: HealthData,
+): Promise<RecommendationData[] | null> => {
+  try {
+    const response = await axios.post<RecommendationData[]>(
+      'http://127.0.0.1:8000/api/v1/recommend/recommendation/',
+      data,
+    );
+    return response.data;
+  } catch (error) {
+    console.error('Error fetching recommendation:', error);
+    return null;
+  }
+};
+
+export default fetchRecommendation;

frontend/src/components/Alert/Alert.tsx

@@ -0,0 +1,55 @@
+import React, { useEffect, useState } from 'react';
+import DangerAlert from './DangerAlert';
+import GoodAlert from './GoodAlert';
+import WarningAlert from './WarningAlert';
+import fetchRecommendation from '../../api/RecommendData';
+
+const Alert: React.FC<HealthData> = ({
+  indoor_temp,
+  outdoor_temp,
+  outdoor_pm25,
+  outdoor_pm10,
+  outdoor_humidity,
+}) => {
+  const [recommendation, setRecommendation] = useState<
+    string | null | undefined
+  >(null);
+  const [message, setMessage] = useState<string | undefined>('');
+
+  useEffect(() => {
+    const fetchData = async () => {
+      const data = await fetchRecommendation({
+        indoor_temp: indoor_temp,
+        outdoor_temp: outdoor_temp,
+        outdoor_pm25: outdoor_pm25,
+        outdoor_pm10: outdoor_pm10,
+        outdoor_humidity: outdoor_humidity,
+      });
+
+      if (data && data.length > 0) {
+        // priority: danger > warning > good
+        for (let i = 0; i < data.length; i++) {
+          if (data[i].status === 'danger' || data[i].status === 'warning') {
+            setRecommendation(data[i].status);
+            setMessage(data[i].recommendation);
+            return;
+          }
+        }
+      }
+    };
+
+    fetchData();
+  }, []);
+
+  if (recommendation === 'good') {
+    return <GoodAlert message={message} />;
+  } else if (recommendation === 'warning') {
+    return <WarningAlert message={message} />;
+  } else if (recommendation === 'danger') {
+    return <DangerAlert message={message} />;
+  } else {
+    return <GoodAlert message="No tips today" />;
+  }
+};
+
+export default Alert;

frontend/src/components/Alert/DangerAlert.tsx

@@ -19,9 +19,7 @@ const DangerAlert: React.FC<Message> = ({ message }) => {
         </svg>
       </div>
       <div className="w-full">
-        <h5 className="mb-3 font-semibold text-[#B45454]">
-          There were 1 errors with your submission
-        </h5>
+        <h5 className="mb-3 font-semibold text-[#B45454]">Dangerous!</h5>
         <ul>
           <li className="leading-relaxed text-[#CD5D5D]">{message}</li>
         </ul>

frontend/src/components/Alert/GoodAlert.tsx

@@ -20,7 +20,7 @@ const GoodAlert: React.FC<Message> = ({ message }) => {
       </div>
       <div className="w-full">
         <h5 className="mb-3 text-lg font-semibold text-black dark:text-[#34D399] ">
-          Message Sent Successfully
+          Everything is good
         </h5>
         <p className="text-base leading-relaxed text-body">{message}</p>
       </div>

frontend/src/types/Recommend.ts

@@ -0,0 +1,13 @@
+interface HealthData {
+  indoor_temp: number | undefined;
+  outdoor_temp: number | undefined;
+  outdoor_pm25: number | undefined;
+  outdoor_pm10: number | undefined;
+  outdoor_humidity: number | undefined;
+}
+
+interface RecommendationData {
+  timestamp?: Date;
+  recommendation?: string;
+  status?: string;
+}

frontend/src/types/general.ts

@@ -1,3 +1,3 @@
 interface Message {
-  message: string;
+  message: string | undefined;
 }