test/1114/app/routes/weather.tsx

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("")
        }
    }, [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>
    )
}