67 lines
2.1 KiB
TypeScript
67 lines
2.1 KiB
TypeScript
import { useState } from "react";
|
|
import React from "react";
|
|
import { changeAPIcookie } from "../utils/changeAPIcookie";
|
|
import { KeyRound } from "lucide-react";
|
|
|
|
interface Props {
|
|
currentAPIKey: string;
|
|
onClose: () => void;
|
|
}
|
|
|
|
const ChangeAPI: React.FC<Props> = ({ currentAPIKey, onClose }) => {
|
|
const [apiKey, setApiKey] = useState(currentAPIKey);
|
|
|
|
const handleUpdate = () => {
|
|
changeAPIcookie(apiKey);
|
|
onClose();
|
|
};
|
|
|
|
return (
|
|
<div className="w-full">
|
|
<h2 className="text-2xl font-bold mb-2 text-blue-700">Change API Key</h2>
|
|
<h4 className="mb-2 font-semibold text-gray-600">
|
|
Update your API key to fetch weather data.
|
|
</h4>
|
|
<div className="mb-6 flex items-center gap-2 font-style: italic text-gray-500 flex-wrap text-">
|
|
<p>We are using</p>
|
|
<a
|
|
href="https://openweathermap.org/api"
|
|
className="text-blue-600 font-semibold underline hover:text-blue-800"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
>
|
|
OpenWeatherMap
|
|
</a>
|
|
<p>API for fetching weather data.</p>
|
|
</div>
|
|
<form className="flex flex-col gap-4">
|
|
<label htmlFor="apiKey" className="font-medium text-gray-700">
|
|
API Key:
|
|
</label>
|
|
<div className="flex items-center gap-2 w-full">
|
|
<KeyRound size={32} />
|
|
<input
|
|
type="text"
|
|
id="apiKey"
|
|
name="apiKey"
|
|
placeholder="Enter your API key"
|
|
value={apiKey}
|
|
onChange={(e) => setApiKey(e.target.value)}
|
|
required
|
|
className="border border-blue-300 rounded-xl px-6 py-3 focus:outline-none focus:ring-2 focus:ring-blue-400 bg-blue-50 text-blue-900 font-mono w-full"
|
|
/>
|
|
</div>
|
|
<button
|
|
type="submit"
|
|
className="cursor-pointer bg-gradient-to-r from-blue-600 to-blue-400 text-white font-bold px-6 py-3 rounded-xl shadow-lg hover:from-blue-700 hover:to-blue-500 transition-all"
|
|
onClick={handleUpdate}
|
|
>
|
|
Update API Key
|
|
</button>
|
|
</form>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ChangeAPI;
|