lzq
/
Weather
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

1114

This commit is contained in:
qiuchenfan 2025-11-17 19:26:09 +08:00
parent 68e8d21a8e
commit 93b467ba13
3 changed files with 47 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
app/components/WeatherDetailsGird.tsx
View File

@ -1,5 +1,6 @@
import { Cloud, Droplets, Gauge, ThermometerSun, Wind } from "lucide-react"; import { Cloud, Droplets, Gauge, ThermometerSun, Wind } from "lucide-react";
import { useWeatherStore } from "@/store/weatherStore"; import { useWeatherStore } from "@/store/weatherStore";
import { MapPin, Thermometer } from "lucide-react";
interface WeatherDetailsGridProps { interface WeatherDetailsGridProps {
icon: React.ReactNode; icon: React.ReactNode;

45
app/components/WeatherDispaly2.tsx
View File

@ -1,45 +0,0 @@
import { MapPin, Thermometer } from "lucide-react";
export function WeatherDisplay2(){
const {currentWeather} = useWeatherStore();
if(!currentWeather) return null;
return(
<div className="relative overflow-hidden rounded-2xl bg-gradient-to-b from-blue-500 via-cyan-500 to-blue-500 p-6 mb-4">
<div className="absolute inset-0 bg-gradient-to-br from-white/100 to-transparent"></div>
<div className="absolute -right-8 -top-8 w-32 h-32 bg-white/20 rounded-full blur-3xl"></div>
<div className="realtive z-10 ">
<div className="flex items-start justify-between mb-6">
<div>
<h2 className="text-3xl font-semibold text-white mb-2">{currentWeather.location.name}</h2>
<div className="text-white w-3 h-3">
<MapPin className="w-3 h-3 text-white" />
<span className="text-white text-sm">{currentWeather.location.country}</span>
</div>
<div className="text-white ">
<WeatherIcon
description={currentWeather.current.weather_descriptions[0]}
isDay={currentWeather.current.is_day}
/>
</div>
</div>
<div className="flex items-baseline gap-2 mb-2">
<span className="text-6xl font-light text-white">
{formatTemperature(currentWeather.current.temperature)}
</span>
<span className="text-2xl text-white">
°C
</span>
</div>
<p className="text-lg text-white mb-2 capitalize font-medium">
{currentWeather.current.weather_descriptions[0]}
</p>
<div className="flex items-center gap-2 text-white text-sm">
<Thermometer className="w-4 h-4"/>
<span>体感{formatTemperature(currentWeather.current.feelslike)}°C</span>
</div>
</div>
</div>
</div>
)
}

46
app/components/WeatherDisplay.tsx
View File

@ -9,6 +9,7 @@ import {
CloudSnow, CloudSnow,
CloudSun, CloudSun,
MapPin, Moon, Sun, MapPin, Moon, Sun,
Thermometer,
ThermometerSun ThermometerSun
} from 'lucide-react'; } from 'lucide-react';
@ -44,3 +45,48 @@ function WeatherIcon({ description, isDay, className = "w-16 h-16 md:w-20 md:h-2
} }
return isDaytime ? <Sun className={className} /> : <Moon className={className} />; return isDaytime ? <Sun className={className} /> : <Moon className={className} />;
} }
export function WeatherDisplay2(){
const {currentWeather} = useWeatherStore();
if(!currentWeather) return null;
return(
<div className="relative overflow-hidden rounded-2xl bg-gradient-to-b from-blue-500 via-cyan-500 to-blue-500 p-6 mb-4">
<div className="absolute inset-0 bg-gradient-to-br from-white/100 to-transparent"></div>
<div className="absolute -right-8 -top-8 w-32 h-32 bg-white/20 rounded-full blur-3xl"></div>
<div className="realtive z-10 ">
<div className="flex items-start justify-between mb-6">
<div>
<h2 className="text-3xl font-semibold text-white mb-2">{currentWeather.location.name}</h2>
<div className="text-white w-3 h-3">
<MapPin className="w-3 h-3 text-white" />
<span className="text-white text-sm">{currentWeather.location.country}</span>
</div>
<div className="text-white ">
<WeatherIcon
description={currentWeather.current.weather_descriptions[0]}
isDay={currentWeather.current.is_day}
/>
</div>
</div>
<div className="flex items-baseline gap-2 mb-2">
<span className="text-6xl font-light text-white">
{formatTemperature(currentWeather.current.temperature)}
</span>
<span className="text-2xl text-white">
°C
</span>
</div>
<p className="text-lg text-white mb-2 capitalize font-medium">
{currentWeather.current.weather_descriptions[0]}
</p>
<div className="flex items-center gap-2 text-white text-sm">
<Thermometer className="w-4 h-4"/>
<span>体感{formatTemperature(currentWeather.current.feelslike)}°C</span>
</div>
</div>
</div>
</div>
)
}