79 lines
2.6 KiB
TypeScript
79 lines
2.6 KiB
TypeScript
import { useState } from "react";
|
|
import React from "react";
|
|
import { changeAPIcookie } from "../utils/changeAPIcookie";
|
|
|
|
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">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
strokeWidth={2}
|
|
stroke="currentColor"
|
|
className="w-7 h-7 flex-shrink-0"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
d="M15.75 5.25a3 3 0 0 1 3 3m3 0a6 6 0 0 1-7.029 5.912c-.563-.097-1.159.026-1.563.43L10.5 17.25H8.25v2.25H6v2.25H2.25v-2.818c0-.597.237-1.17.659-1.591l6.499-6.499c.404-.404.527-1 .43-1.563A6 6 0 1 1 21.75 8.25Z"
|
|
/>
|
|
</svg>
|
|
<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="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;
|