This commit is contained in:
parent
bf3291a39d
commit
81578b2585
|
|
@ -1,3 +1,5 @@
|
||||||
|
import { Cloud, Droplets, Gauge, ThermometerSun, Wind } from "lucide-react";
|
||||||
|
|
||||||
interface WeatherDetailsGridProps {
|
interface WeatherDetailsGridProps {
|
||||||
icon: React.ReactNode;
|
icon: React.ReactNode;
|
||||||
label: string;
|
label: string;
|
||||||
|
|
@ -5,3 +7,53 @@ interface WeatherDetailsGridProps {
|
||||||
subtitle?: string;
|
subtitle?: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function WeatherInfoItem({ icon, label, value, subtitle }: WeatherDetailsGridProps) {
|
||||||
|
return(
|
||||||
|
<div className="group rounded-xl bg-slate-50/50 border border-slate-200 p-4 hover:bg-slate-100/80 hover:border-slate-300 transition-all duration-300">
|
||||||
|
<div className="flex items-start gap-2">
|
||||||
|
<div className="flex-shrink-0 w-9 h-9 rounded-full bg-white flex items-center justify-center group-hover:scale-100 transition-tramsform duration-300">
|
||||||
|
{icon}
|
||||||
|
</div>
|
||||||
|
<div className="flex-1 min-w-0">
|
||||||
|
<p className="text-sm text-slate-500">{label}</p>
|
||||||
|
<p className="text-slate-900 text-sm font-semibold">{value}</p>
|
||||||
|
{subtitle && <p className="text-xs text-slate-400 mt-1">{subtitle}</p>}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export function WeatherDetailsGrid(){
|
||||||
|
const currentWeather = useWeatherState();
|
||||||
|
if(!currentWeather) return null;
|
||||||
|
return(
|
||||||
|
<div>
|
||||||
|
<div className="grid grid-cols-2 md:grid-cols-3 gap-3 mb-4">
|
||||||
|
<WeatherInfoItem icon={<Droplets className="w-4 h-4 text-blue-500"/>} label="湿度" value={`${currentWeather.current.humidity}%`} />
|
||||||
|
<WeatherInfoItem icon={<Wind className="w-4 h-4 text-blue-500"/>} label="风速" value={`${currentWeather.current.wind_speed} m/s`} />
|
||||||
|
<WeatherInfoItem icon={<Gauge className="w-4 h-4 text-blue-500"/>} label="气压" value={`${currentWeather.current.pressure} hPa`} />
|
||||||
|
<WeatherInfoItem icon={<Cloud className="w-4 h-4 text-blue-500"/>} label="云量" value={`${currentWeather.current.cloudcover}%`} />
|
||||||
|
<WeatherInfoItem icon={<ThermometerSun className="w-4 h-4 text-blue-500"/>} label="紫外线" value={`${currentWeather.current.uv_index} UV`} />
|
||||||
|
</div>
|
||||||
|
<div className="pt-4 border-t border-slate-200">
|
||||||
|
<div className="flex items-center justify-between text-sm mb-2">
|
||||||
|
<div className="flex items-center gap-2 text-slate-600">
|
||||||
|
<Droplets className="w-4 h-4 text-blue-500"/>
|
||||||
|
<span>降水量:\
|
||||||
|
<span className="font-semibold">
|
||||||
|
{currentWeather.current.precipitation} mm
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<span className=" text-slate-600">
|
||||||
|
{currentWeather.current.is_day === "yes" ? "白天" : "夜晚"}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<p className="text-xs text-center text-slate-500">
|
||||||
|
观测时间: {currentWeather.current.observation_time}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
44
package.json
44
package.json
|
|
@ -8,37 +8,6 @@
|
||||||
"start": "react-router-serve ./build/server/index.js",
|
"start": "react-router-serve ./build/server/index.js",
|
||||||
"typecheck": "react-router typegen && tsc"
|
"typecheck": "react-router typegen && tsc"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
|
||||||
"@radix-ui/react-dialog": "^1.1.15",
|
|
||||||
"@radix-ui/react-label": "^2.1.8",
|
|
||||||
"@radix-ui/react-select": "^2.2.6",
|
|
||||||
"@radix-ui/react-slot": "^1.2.4",
|
|
||||||
"@react-router/node": "^7.9.2",
|
|
||||||
"@react-router/serve": "^7.9.2",
|
|
||||||
"class-variance-authority": "^0.7.1",
|
|
||||||
"clsx": "^2.1.1",
|
|
||||||
"isbot": "^5.1.31",
|
|
||||||
"lucide-react": "^0.554.0",
|
|
||||||
"next-themes": "^0.4.6",
|
|
||||||
"react": "^19.1.1",
|
|
||||||
"react-dom": "^19.1.1",
|
|
||||||
<<<<<<< HEAD
|
|
||||||
"react-router": "^7.9.2",
|
|
||||||
"sonner": "^2.0.7",
|
|
||||||
"tailwind-merge": "^3.4.0"
|
|
||||||
=======
|
|
||||||
"react-router": "^7.9.2"
|
|
||||||
},{
|
|
||||||
"name": "1114",
|
|
||||||
"private": true,
|
|
||||||
"type": "module",
|
|
||||||
"scripts": {
|
|
||||||
"build": "react-router build",
|
|
||||||
"dev": "react-router dev",
|
|
||||||
"start": "react-router-serve ./build/server/index.js",
|
|
||||||
"typecheck": "react-router typegen && tsc"
|
|
||||||
>>>>>>> 9b018e3e43a44ed8f5b9d08e22c09de35b4ce874
|
|
||||||
},
|
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@radix-ui/react-dialog": "^1.1.15",
|
"@radix-ui/react-dialog": "^1.1.15",
|
||||||
"@radix-ui/react-label": "^2.1.8",
|
"@radix-ui/react-label": "^2.1.8",
|
||||||
|
|
@ -74,17 +43,4 @@
|
||||||
"vite": "^7.1.7",
|
"vite": "^7.1.7",
|
||||||
"vite-tsconfig-paths": "^5.1.4"
|
"vite-tsconfig-paths": "^5.1.4"
|
||||||
}
|
}
|
||||||
}
|
|
||||||
"devDependencies": {
|
|
||||||
"@react-router/dev": "^7.9.2",
|
|
||||||
"@tailwindcss/vite": "^4.1.13",
|
|
||||||
"@types/node": "^22",
|
|
||||||
"@types/react": "^19.1.13",
|
|
||||||
"@types/react-dom": "^19.1.9",
|
|
||||||
"tailwindcss": "^4.1.13",
|
|
||||||
"tw-animate-css": "^1.4.0",
|
|
||||||
"typescript": "^5.9.2",
|
|
||||||
"vite": "^7.1.7",
|
|
||||||
"vite-tsconfig-paths": "^5.1.4"
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
Loading…
Reference in New Issue