42 lines
1.3 KiB
TypeScript
42 lines
1.3 KiB
TypeScript
import React from "react";
|
|
import ChangeAPI from "./ChangeAPI";
|
|
import { useState } from "react";
|
|
import Cookies from "js-cookie";
|
|
|
|
const Header: React.FC = () => {
|
|
const [apiCard, setApiCard] = useState(false);
|
|
const apiKey = Cookies.get("apiKey") || "";
|
|
|
|
return (
|
|
<>
|
|
<header className="bg-blue-600 text-white shadow-md py-6 px-4 flex items-center justify-between">
|
|
<h1 className="text-3xl font-bold tracking-wide drop-shadow">
|
|
Weather App
|
|
</h1>
|
|
<button
|
|
className="bg-white text-blue-600 font-semibold px-4 py-2 rounded-lg shadow hover:bg-blue-100 transition"
|
|
onClick={() => setApiCard(true)}
|
|
>
|
|
Set API Key
|
|
</button>
|
|
</header>
|
|
{apiCard && (
|
|
<div className="fixed inset-0 bg-gray-800 bg-opacity-40 flex items-center justify-center z-50">
|
|
<div className="bg-white rounded-xl shadow-lg p-8 w-full max-w-md relative">
|
|
<button
|
|
className="absolute top-4 right-4 text-gray-400 hover:text-blue-600 text-xl"
|
|
onClick={() => setApiCard(false)}
|
|
aria-label="Close"
|
|
>
|
|
×
|
|
</button>
|
|
<ChangeAPI currentAPIKey={apiKey} />
|
|
</div>
|
|
</div>
|
|
)}
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default Header;
|