feat: show both Celsius and Fahrenheit in weather widget
This commit is contained in:
@@ -2,6 +2,10 @@
|
|||||||
|
|
||||||
import { useState, useEffect } from 'react';
|
import { useState, useEffect } from 'react';
|
||||||
|
|
||||||
|
function celsiusToFahrenheit(c: number): number {
|
||||||
|
return Math.round((c * 9/5) + 32);
|
||||||
|
}
|
||||||
|
|
||||||
export default function WeatherWidget() {
|
export default function WeatherWidget() {
|
||||||
const [weather, setWeather] = useState<any>(null);
|
const [weather, setWeather] = useState<any>(null);
|
||||||
const [loading, setLoading] = useState(true);
|
const [loading, setLoading] = useState(true);
|
||||||
@@ -63,6 +67,9 @@ export default function WeatherWidget() {
|
|||||||
};
|
};
|
||||||
|
|
||||||
const icon = weatherIcons[current.weathercode] || '🌤️';
|
const icon = weatherIcons[current.weathercode] || '🌤️';
|
||||||
|
const tempF = celsiusToFahrenheit(current.celsius);
|
||||||
|
const maxF = celsiusToFahrenheit(today.maxC);
|
||||||
|
const minF = celsiusToFahrenheit(today.minC);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div style={{
|
<div style={{
|
||||||
@@ -77,8 +84,8 @@ export default function WeatherWidget() {
|
|||||||
<div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
|
<div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
|
||||||
<span style={{ fontSize: '28px' }}>{icon}</span>
|
<span style={{ fontSize: '28px' }}>{icon}</span>
|
||||||
<div>
|
<div>
|
||||||
<div style={{ fontSize: '22px', fontWeight: '600', color: '#1a1a2e' }}>
|
<div style={{ fontSize: '18px', fontWeight: '600', color: '#1a1a2e' }}>
|
||||||
{current.celsius}°C
|
{current.celsius}°C / {tempF}°F
|
||||||
</div>
|
</div>
|
||||||
<div style={{ fontSize: '11px', color: '#666', marginTop: '2px' }}>
|
<div style={{ fontSize: '11px', color: '#666', marginTop: '2px' }}>
|
||||||
{current.summary}
|
{current.summary}
|
||||||
@@ -95,7 +102,7 @@ export default function WeatherWidget() {
|
|||||||
color: '#555'
|
color: '#555'
|
||||||
}}>
|
}}>
|
||||||
<span>📍 Otavalo</span>
|
<span>📍 Otavalo</span>
|
||||||
<span>↑{today.maxC}° ↓{today.minC}°</span>
|
<span>↑{today.maxC}°C ({maxF}°F) ↓{today.minC}°C ({minF}°F)</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
Reference in New Issue
Block a user