changed path

src/components/Header.tsx

@@ -0,0 +1,97 @@
+import React from "react";
+import ChangeAPI from "./ChangeAPI";
+import ChangePreferences from "./ChangePreferences";
+import { useState } from "react";
+import Cookies from "js-cookie";
+import logo from "../assets/cloud-sun-fill.png";
+import { Github, KeyRound, Settings2 } from "lucide-react";
+
+const Header: React.FC = () => {
+  const [apiCard, setApiCard] = useState(false);
+  const [preferencesCard, setPreferencesCard] = useState(false);
+  const apiKey = Cookies.get("apiKey") || "";
+
+  return (
+    <>
+      <header className="bg-gradient-to-r from-blue-700 via-blue-600 to-blue-500 text-white shadow-lg py-8 px-6 flex items-center justify-between rounded-b-3xl">
+        <div className="flex items-center gap-4">
+          <img
+            src={logo}
+            alt="Weather App Logo"
+            className="w-10 h-10 drop-shadow-lg"
+          />
+          <h1 className="text-4xl font-extrabold tracking-wide drop-shadow-lg">
+            Weather App
+          </h1>
+        </div>
+        <div className="flex items-center gap-4">
+          {" "}
+          {/* Added container for buttons */}
+          <button
+            className="bg-white text-blue-700 font-bold px-6 py-3 rounded-xl shadow-lg hover:bg-blue-100 transition-all border border-blue-200 flex items-center gap-2"
+            onClick={() => setApiCard(true)}
+          >
+            <span className="flex items-center gap-2">
+              <KeyRound />
+              Set API Key
+            </span>
+          </button>
+          <button
+            className="bg-white text-blue-700 font-bold px-6 py-3 rounded-xl shadow-lg hover:bg-blue-100 transition-all border border-blue-200 flex items-center gap-2"
+            onClick={() => setPreferencesCard(true)}
+          >
+            <span className="flex items-center gap-2">
+              <Settings2 />
+              Preferences
+            </span>
+          </button>
+          <a
+            href="https://github.com/theis-js/weather-app/wiki"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <button className="bg-white text-blue-700 font-bold px-6 py-3 rounded-xl shadow-lg hover:bg-blue-100 transition-all border border-blue-200 flex items-center gap-2">
+              <span className="flex items-center gap-2">
+                <Github /> Docs
+              </span>
+            </button>
+          </a>
+        </div>
+      </header>
+      {apiCard && (
+        <div className="fixed inset-0 bg-gray-900 bg-opacity-60 flex items-center justify-center z-50 transition-all">
+          <div className="bg-white rounded-2xl shadow-2xl p-10 w-full max-w-md relative border-2 border-blue-200">
+            <button
+              className="absolute top-4 right-4 text-gray-400 hover:text-blue-600 text-2xl font-bold"
+              onClick={() => setApiCard(false)}
+              aria-label="Close"
+            >
+              &times;
+            </button>
+            <ChangeAPI
+              currentAPIKey={apiKey}
+              onClose={() => setApiCard(false)}
+            />
+          </div>
+        </div>
+      )}
+
+      {preferencesCard && (
+        <div className="fixed inset-0 bg-gray-900 bg-opacity-60 flex items-center justify-center z-50 transition-all">
+          <div className="bg-white rounded-2xl shadow-2xl p-10 w-full max-w-md relative border-2 border-blue-200">
+            <button
+              className="absolute top-4 right-4 text-gray-400 hover:text-blue-600 text-2xl font-bold"
+              onClick={() => setPreferencesCard(false)}
+              aria-label="Close"
+            >
+              &times;
+            </button>
+            <ChangePreferences onClose={() => setPreferencesCard(false)} />
+          </div>
+        </div>
+      )}
+    </>
+  );
+};
+
+export default Header;