feat: add lucide-react icons to components and update dependencies

frontend/src/utils/apiFunc.ts

@@ -1,4 +1,5 @@
 import { myToast } from "./toastify";
+import Cookies from "js-cookie";
 
 export const fetchWeather = async (
   city: string,
@@ -10,10 +11,14 @@ export const fetchWeather = async (
     `http://api.openweathermap.org/geo/1.0/direct?q=${city}&appid=${apiKey}`
   ).then((response) => {
     if (response.status === 401) {
-      myToast(
-        "You are not authorized to access this resource. Please check your API key. (Error: x4010)",
-        "error"
-      );
+      if (Cookies.get("apiKey") === undefined || Cookies.get("apiKey") === "") {
+        myToast("You have to enter an API key!", "error");
+      } else {
+        myToast(
+          "You are not authorized to access this resource. Please check your API key. (Error: x4010)",
+          "error"
+        );
+      }
     } else if (response.ok) {
       return response.json();
     } else {