Weather/app/routes/weather.tsx

import React, {useEffect} from 'react';
import { Loader2 } from 'lucide-react';
import { WeatherCard } from '@/components/WeatherCard';
import { useWeatherStore } from '@/store/weatherStore';
import {toast} from "sonner";

export function meta() {
  return [
    { title: '天气 - Apple风格设计' },
    { name: 'description', content: '优雅的天气查询应用' },
  ];
}


export default function Weather() {
  const { currentWeather, isLoading ,error,setError} = useWeatherStore();
    // Show toast when error changes
    useEffect(() => {
        if (error) {
            toast.error(error);
            // Clear error after showing toast
            setError(null);
        }
    }, [error, setError]);
  return (
    <div className="min-h-screen bg-gradient-to-b from-slate-50 via-blue-50/30 to-slate-50 dark:from-slate-950 dark:via-slate-900 dark:to-slate-950 transition-colors duration-500">
      <div className="max-w-4xl mx-auto px-4 py-8 md:px-6 md:py-12">
       
        <header className="text-center mb-8 space-y-3">
          <h1 className="text-5xl md:text-6xl font-semibold tracking-tight bg-gradient-to-br from-blue-600 via-sky-500 to-cyan-500 dark:from-blue-400 dark:via-sky-400 dark:to-cyan-400 bg-clip-text text-transparent animate-in fade-in slide-in-from-top-4 duration-700">
            天气
          </h1>
          <p className="text-sm md:text-base text-slate-500 dark:text-slate-400 font-medium animate-in fade-in slide-in-from-top-5 duration-700">
            实时天气信息
          </p>
        </header>

       
        {isLoading && !currentWeather && (
          <div className="flex items-center justify-center py-20">
            <div className="text-center space-y-6 animate-in fade-in zoom-in-95 duration-500">
              <div className="relative w-16 h-16 mx-auto">
                <div className="absolute inset-0 rounded-full bg-gradient-to-tr from-blue-500 to-cyan-400 opacity-20 animate-ping"></div>
                <div className="relative w-16 h-16 rounded-full bg-gradient-to-tr from-blue-500 to-cyan-400 flex items-center justify-center">
                  <Loader2 className="w-8 h-8 text-white animate-spin" />
                </div>
              </div>
              <p className="text-slate-600 dark:text-slate-300 font-medium">
                正在获取天气数据
              </p>
            </div>
          </div>
        )}

        {!isLoading || currentWeather ? (
          <div className="animate-in fade-in slide-in-from-bottom-4 duration-700">
            <WeatherCard />
          </div>
        ) : null}
      </div>
    </div>
  );
}