remi/Perplexica
1
0
Fork 0
mirror of https://github.com/ItzCrazyKns/Perplexica.git synced 2025-12-14 15:48:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(weather): respect unit preference

Browse Source
This commit is contained in:
ItzCrazyKns
2025-12-08 13:09:21 +05:30
parent 85f6c3b901
commit 2df6250ba1
1 changed files with 25 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
src/components/Widgets/Weather.tsx
View File

@@ -1,5 +1,6 @@
'use client'; 'use client';
import { getMeasurementUnit } from '@/lib/config/clientRegistry';
import { Wind, Droplets, Gauge } from 'lucide-react'; import { Wind, Droplets, Gauge } from 'lucide-react';
import { useMemo, useEffect, useState } from 'react'; import { useMemo, useEffect, useState } from 'react';
@@ -226,6 +227,20 @@ const Weather = ({
timezone, timezone,
}: WeatherWidgetProps) => { }: WeatherWidgetProps) => {
const [isDarkMode, setIsDarkMode] = useState(false); const [isDarkMode, setIsDarkMode] = useState(false);
const unit = getMeasurementUnit();
const isImperial = unit === 'imperial';
const tempUnitLabel = isImperial ? '°F' : '°C';
const windUnitLabel = isImperial ? 'mph' : 'km/h';
const formatTemp = (celsius: number) => {
if (!Number.isFinite(celsius)) return 0;
return Math.round(isImperial ? (celsius * 9) / 5 + 32 : celsius);
};
const formatWind = (speedKmh: number) => {
if (!Number.isFinite(speedKmh)) return 0;
return Math.round(isImperial ? speedKmh * 0.621371 : speedKmh);
};
useEffect(() => { useEffect(() => {
const checkDarkMode = () => { const checkDarkMode = () => {
@@ -266,14 +281,12 @@ const Weather = ({
return { return {
day: dayName, day: dayName,
icon: info.icon, icon: info.icon,
high: Math.round(daily.temperature_2m_max[idx + 1]), high: formatTemp(daily.temperature_2m_max[idx + 1]),
low: Math.round(daily.temperature_2m_min[idx + 1]), low: formatTemp(daily.temperature_2m_min[idx + 1]),
highF: Math.round((daily.temperature_2m_max[idx + 1] * 9) / 5 + 32),
lowF: Math.round((daily.temperature_2m_min[idx + 1] * 9) / 5 + 32),
precipitation: daily.precipitation_probability_max[idx + 1] || 0, precipitation: daily.precipitation_probability_max[idx + 1] || 0,
}; };
}); });
}, [daily, isDarkMode]); }, [daily, isDarkMode, isImperial]);
if (!current || !daily || !daily.time || daily.time.length === 0) { if (!current || !daily || !daily.time || daily.time.length === 0) {
return ( return (
@@ -305,9 +318,9 @@ const Weather = ({
<div> <div>
<div className="flex items-baseline gap-1"> <div className="flex items-baseline gap-1">
<span className="text-4xl font-bold drop-shadow-md"> <span className="text-4xl font-bold drop-shadow-md">
{current.temperature_2m}° {formatTemp(current.temperature_2m)}°
</span> </span>
<span className="text-lg">F C</span> <span className="text-lg">{tempUnitLabel}</span>
</div> </div>
<p className="text-sm font-medium drop-shadow mt-0.5"> <p className="text-sm font-medium drop-shadow mt-0.5">
{weatherInfo.description} {weatherInfo.description}
@@ -316,7 +329,8 @@ const Weather = ({
</div> </div>
<div className="text-right"> <div className="text-right">
<p className="text-xs font-medium opacity-90"> <p className="text-xs font-medium opacity-90">
{daily.temperature_2m_max[0]}° {daily.temperature_2m_min[0]}° {formatTemp(daily.temperature_2m_max[0])}°{' '}
{formatTemp(daily.temperature_2m_min[0])}°
</p> </p>
</div> </div>
</div> </div>
@@ -370,7 +384,7 @@ const Weather = ({
Wind Wind
</p> </p>
<p className="font-semibold"> <p className="font-semibold">
{Math.round(current.wind_speed_10m)} km/h {formatWind(current.wind_speed_10m)} {windUnitLabel}
</p> </p>
</div> </div>
</div> </div>
@@ -394,7 +408,8 @@ const Weather = ({
Feels Like Feels Like
</p> </p>
<p className="font-semibold"> <p className="font-semibold">
{Math.round(current.apparent_temperature)}°C {formatTemp(current.apparent_temperature)}
{tempUnitLabel}
</p> </p>
</div> </div>
</div> </div>