34 lines
1.2 KiB
TypeScript
34 lines
1.2 KiB
TypeScript
import { WeatherSearchForm } from "@/components/weather/WeatherSearchForm";
|
|
import { WeatherDisplay } from "@/components/weather/WeatherDisplay";
|
|
import { WeatherDetailsGrid } from "@/components/weather/WeatherDetailsGrid";
|
|
import { useWeatherStore } from "@/store/weatherStore";
|
|
import {Cloud} from 'lucide-react';
|
|
|
|
export function WeatherCard() {
|
|
const { currentWeather } = useWeatherStore();
|
|
|
|
return (
|
|
<div>
|
|
<WeatherSearchForm />
|
|
{currentWeather ? (
|
|
<div className="P-4">
|
|
<WeatherDisplay />
|
|
<WeatherDetailsGrid />
|
|
</div>
|
|
) : (
|
|
<div className="flex flex-col items-center justify-center h-full">
|
|
<div className="animate-spin">
|
|
<div className="h-10 w-10 border-t-2 border-b-2 border-gray-900 rounded-full"></div>
|
|
<div className="h-10 w-10">
|
|
<Cloud/>
|
|
</div>
|
|
</div>
|
|
<h3 className="text-2xl font-bold text-slate-700 dark:text-slate-200 mb-2">暂无天气数据</h3>
|
|
<p className="text-sm text-slate-500 dark:text-slate-400">请搜索城市查看实时天气信息</p>
|
|
</div>
|
|
|
|
)}
|
|
</div>
|
|
);
|
|
}
|