49 lines
2.1 KiB
TypeScript
49 lines
2.1 KiB
TypeScript
import { toast } from "sonner"
|
|
import { Loader2 } from "lucide-react"
|
|
import { useEffect } from "react"
|
|
import { useWeatherStore } from "../store/weatherStore"
|
|
import { WeatherCard } from "@/components/WeatherCard"
|
|
export function meta() {
|
|
return [
|
|
{ title: "天气查询页面" },
|
|
{ name: "description", content: "查询天气信息" }
|
|
]
|
|
}
|
|
export function Weather() {
|
|
const { currentWeather, isLoading, error, setError } = useWeatherStore()
|
|
useEffect(() => {
|
|
if (error) {
|
|
toast.error(error)
|
|
setError("")
|
|
}
|
|
}, [ErrorEvent, setError])
|
|
return (
|
|
<div className="flex flex-col items-center justify-center h-screen">
|
|
<div className="flex flex-col items-center justify-center">
|
|
<header className="flex flex-col items-center justify-center">
|
|
<h1 className="text-4xl font-bold">天气查询</h1>
|
|
<p className="text-sm">实时天气</p>
|
|
</header>
|
|
{isLoading && !currentWeather && (
|
|
<div className="flex flex-col items-center justify-center">
|
|
<div className="flex flex-col items-center justify-center"></div>
|
|
<div className="flex flex-col items-center justify-center">
|
|
<div className="animate-spin rounded-full h-20 w-20 border-t-2 border-b-2 border-gray-900">
|
|
</div>
|
|
<div className="text-gray-900 text-lg font-bold">
|
|
<Loader2 className="h-10 w-10 animate-spin" />
|
|
</div>
|
|
</div>
|
|
<p className="text-gray-900 text-lg font-bold">正在加载...</p>
|
|
</div>
|
|
)
|
|
}
|
|
{isLoading || currentWeather ? (
|
|
<div className="flex flex-col items-center justify-center">
|
|
<WeatherCard />
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
)
|
|
} |