New feature: You can now change the api key graphically with an changeAPI card.

frontend/src/components/ChangeAPI.tsx

@@ -0,0 +1,34 @@
+import React, { useState } from "react";
+import { changeAPIcookie } from "../utils/changeAPIcookie";
+
+interface Props {
+  currentAPIKey: string;
+}
+
+function ChangeAPI({ currentAPIKey }: Props) {
+  const [apiKey, setApiKey] = useState(currentAPIKey);
+
+  return (
+    <div>
+      <h2>Change API Key</h2>
+      <p>Update your API key to fetch weather data.</p>
+      <form>
+        <label htmlFor="apiKey">API Key:</label>
+        <input
+          type="text"
+          id="apiKey"
+          name="apiKey"
+          placeholder="Enter your API key"
+          value={apiKey}
+          onChange={(e) => setApiKey(e.target.value)}
+          required
+        />
+        <button type="button" onClick={() => changeAPIcookie(apiKey)}>
+          Update API Key
+        </button>
+      </form>
+    </div>
+  );
+}
+
+export default ChangeAPI;