58 lines
2.2 KiB
TypeScript
58 lines
2.2 KiB
TypeScript
import REACT, { use, useEffect } from 'react'
|
|
import { Loader2 } from 'lucide-react';
|
|
import { WeatherCard } from '@/components/weather/WeatherCard'
|
|
import { useWeatherStore } from '@/store/weatherStore'
|
|
import { toast } from 'sonner'
|
|
|
|
|
|
|
|
export function meta() {
|
|
return [
|
|
{ title: "天气查询页面" },
|
|
{ name: "description", content: "查询天气信息" }
|
|
]
|
|
|
|
}
|
|
|
|
export default function Weather() {
|
|
|
|
const { currentWeather, isLoading, error, setError } = useWeatherStore()
|
|
useEffect(() => {
|
|
if (error) {
|
|
toast.error(error)
|
|
setError("")
|
|
setError("")
|
|
}
|
|
}, [error, 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 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>
|
|
</div>
|
|
)}
|
|
{!isLoading || currentWeather ? (
|
|
<div className="flex flex-col items-center justify-center">
|
|
<WeatherCard />
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
)
|
|
} |