feat: enhance weather fetching experience with loading state and notifications

frontend/src/components/ChangeAPI.tsx

@@ -1,11 +1,12 @@
 import { useState } from "react";
+import React from "react";
 import { changeAPIcookie } from "../utils/changeAPIcookie";
 
 interface Props {
   currentAPIKey: string;
 }
 
-function ChangeAPI({ currentAPIKey }: Props) {
+const ChangeAPI: React.FC<Props> = ({ currentAPIKey }) => {
   const [apiKey, setApiKey] = useState(currentAPIKey);
 
   return (
@@ -14,6 +15,13 @@ function ChangeAPI({ currentAPIKey }: Props) {
       <p className="mb-6 text-gray-600">
         Update your API key to fetch weather data.
       </p>
+      <p className="mb-6 text-gray-600">
+        We are using{" "}
+        <a href="https://openweathermap.org/api">
+          <strong>OpenWeatherMap</strong>
+        </a>{" "}
+        API for fetching weather data.
+      </p>
       <form className="flex flex-col gap-4">
         <label htmlFor="apiKey" className="font-medium text-gray-700">
           API Key:
@@ -38,6 +46,6 @@ function ChangeAPI({ currentAPIKey }: Props) {
       </form>
     </div>
   );
-}
+};
 
 export default ChangeAPI;