theis.gaedigk/weather-app
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 2 Wiki Activity

added more design using tailwind classes

Browse Source
This commit is contained in:
theis.gaedigk
2025-07-31 17:17:17 +02:00
parent 21963eda1b
commit e3915a0ca4
5 changed files with 100 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
frontend/src/components/ChangeAPI.tsx
View File

@@ -12,16 +12,21 @@ const ChangeAPI: React.FC<Props> = ({ currentAPIKey }) => {
return (
<div className="w-full">
<h2 className="text-2xl font-bold mb-2 text-blue-700">Change API Key</h2>
<p className="mb-6 text-gray-600">
<p className="mb-2 text-gray-600">
Update your API key to fetch weather data.
</p>
<p className="mb-6 text-gray-600">
We are using{" "}
<a href="https://openweathermap.org/api">
<strong>OpenWeatherMap</strong>
</a>{" "}
API for fetching weather data.
</p>
<div className="mb-6 flex items-center gap-2 text-gray-600">
<span>We are using</span>
<a
href="https://openweathermap.org/api"
className="text-blue-600 font-semibold underline hover:text-blue-800"
target="_blank"
rel="noopener noreferrer"
>
OpenWeatherMap
</a>
<span>API for fetching weather data.</span>
</div>
<form className="flex flex-col gap-4">
<label htmlFor="apiKey" className="font-medium text-gray-700">
API Key:
@@ -34,11 +39,11 @@ const ChangeAPI: React.FC<Props> = ({ currentAPIKey }) => {
value={apiKey}
onChange={(e) => setApiKey(e.target.value)}
required
className="border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-400"
className="border border-blue-300 rounded-xl px-4 py-3 focus:outline-none focus:ring-2 focus:ring-blue-400 bg-blue-50 text-blue-900 font-mono"
/>
<button
type="button"
className="bg-blue-600 text-white font-semibold px-4 py-2 rounded-lg shadow hover:bg-blue-700 transition"
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={() => changeAPIcookie(apiKey)}
>
Update API Key