Spaces:
Sleeping
Sleeping
| import React, { useState } from 'react'; | |
| import { motion } from 'framer-motion'; | |
| export default function SimulationLab({ currentCity, onRunSimulation, isSimulating }) { | |
| const [tempOffset, setTempOffset] = useState(0); | |
| const [rainModifier, setRainModifier] = useState(0); | |
| const [humidityModifier, setHumidityModifier] = useState(0); | |
| const [aqiModifier, setAqiModifier] = useState(0); | |
| const [uvModifier, setUvModifier] = useState(0); | |
| const [pressureModifier, setPressureModifier] = useState(0); | |
| const handleRun = () => { | |
| onRunSimulation({ | |
| tempOffset, | |
| rainModifier, | |
| humidityModifier, | |
| aqiModifier, | |
| uvModifier, | |
| pressureModifier, | |
| }); | |
| }; | |
| return ( | |
| <div className="bg-white/80 backdrop-blur-xl border border-slate-200 rounded-3xl p-6 shadow-xl mb-8 relative overflow-hidden"> | |
| <div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-purple-500 to-indigo-500"></div> | |
| <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-6"> | |
| <div> | |
| <h2 className="text-2xl font-black text-slate-800 flex items-center gap-2"> | |
| <span className="text-purple-600">🧪</span> What-If Simulation Lab | |
| </h2> | |
| <p className="text-sm text-slate-500 mt-1 font-medium">Adjust climatic variables to simulate environmental impact on {currentCity?.name}.</p> | |
| </div> | |
| <button | |
| onClick={handleRun} | |
| disabled={isSimulating || !currentCity} | |
| className={`mt-4 sm:mt-0 px-6 py-2.5 rounded-xl font-bold text-white shadow-md transition-all ${isSimulating ? 'bg-slate-400 cursor-not-allowed' : 'bg-gradient-to-r from-purple-600 to-indigo-600 hover:shadow-lg hover:scale-105'}`} | |
| > | |
| {isSimulating ? 'Running...' : 'Run Simulation'} | |
| </button> | |
| </div> | |
| <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| {/* Temperature Slider */} | |
| <div className="bg-slate-50 p-4 rounded-2xl border border-slate-100"> | |
| <div className="flex justify-between items-center mb-2"> | |
| <label className="text-sm font-bold text-slate-700 flex items-center gap-1">🌡️ Temp Anomaly</label> | |
| <span className={`text-sm font-black ${tempOffset > 0 ? 'text-red-500' : tempOffset < 0 ? 'text-blue-500' : 'text-slate-500'}`}> | |
| {tempOffset > 0 ? '+' : ''}{tempOffset}°C | |
| </span> | |
| </div> | |
| <input | |
| type="range" min="-5" max="5" step="0.5" value={tempOffset} onChange={(e) => setTempOffset(parseFloat(e.target.value))} | |
| className="w-full h-2 bg-slate-200 rounded-lg appearance-none cursor-pointer accent-purple-600" | |
| /> | |
| <div className="flex justify-between text-[10px] text-slate-400 mt-1 font-bold">-5°C (Cooler) <span className="text-right">+5°C (Hotter)</span></div> | |
| </div> | |
| {/* Rain Slider */} | |
| <div className="bg-slate-50 p-4 rounded-2xl border border-slate-100"> | |
| <div className="flex justify-between items-center mb-2"> | |
| <label className="text-sm font-bold text-slate-700 flex items-center gap-1">💧 Rainfall Modifier</label> | |
| <span className={`text-sm font-black ${rainModifier > 0 ? 'text-blue-500' : rainModifier < 0 ? 'text-orange-500' : 'text-slate-500'}`}> | |
| {rainModifier > 0 ? '+' : ''}{rainModifier}% | |
| </span> | |
| </div> | |
| <input | |
| type="range" min="-50" max="100" step="5" value={rainModifier} onChange={(e) => setRainModifier(parseInt(e.target.value))} | |
| className="w-full h-2 bg-slate-200 rounded-lg appearance-none cursor-pointer accent-blue-500" | |
| /> | |
| <div className="flex justify-between text-[10px] text-slate-400 mt-1 font-bold">-50% (Drought) <span className="text-right">+100% (Flood)</span></div> | |
| </div> | |
| {/* Humidity Slider */} | |
| <div className="bg-slate-50 p-4 rounded-2xl border border-slate-100"> | |
| <div className="flex justify-between items-center mb-2"> | |
| <label className="text-sm font-bold text-slate-700 flex items-center gap-1">🌫️ Humidity</label> | |
| <span className={`text-sm font-black ${humidityModifier > 0 ? 'text-teal-600' : humidityModifier < 0 ? 'text-orange-500' : 'text-slate-500'}`}> | |
| {humidityModifier > 0 ? '+' : ''}{humidityModifier}% | |
| </span> | |
| </div> | |
| <input | |
| type="range" min="-30" max="30" step="5" value={humidityModifier} onChange={(e) => setHumidityModifier(parseInt(e.target.value))} | |
| className="w-full h-2 bg-slate-200 rounded-lg appearance-none cursor-pointer accent-teal-500" | |
| /> | |
| <div className="flex justify-between text-[10px] text-slate-400 mt-1 font-bold">-30% (Drier) <span className="text-right">+30% (Muggy)</span></div> | |
| </div> | |
| {/* AQI Slider */} | |
| <div className="bg-slate-50 p-4 rounded-2xl border border-slate-100"> | |
| <div className="flex justify-between items-center mb-2"> | |
| <label className="text-sm font-bold text-slate-700 flex items-center gap-1">💨 AQI Modifier</label> | |
| <span className={`text-sm font-black ${aqiModifier > 0 ? 'text-red-500' : aqiModifier < 0 ? 'text-emerald-500' : 'text-slate-500'}`}> | |
| {aqiModifier > 0 ? '+' : ''}{aqiModifier} pts | |
| </span> | |
| </div> | |
| <input | |
| type="range" min="-50" max="200" step="10" value={aqiModifier} onChange={(e) => setAqiModifier(parseInt(e.target.value))} | |
| className="w-full h-2 bg-slate-200 rounded-lg appearance-none cursor-pointer accent-yellow-600" | |
| /> | |
| <div className="flex justify-between text-[10px] text-slate-400 mt-1 font-bold">Cleaner <span className="text-right">More Polluted</span></div> | |
| </div> | |
| {/* UV Index Slider */} | |
| <div className="bg-slate-50 p-4 rounded-2xl border border-slate-100"> | |
| <div className="flex justify-between items-center mb-2"> | |
| <label className="text-sm font-bold text-slate-700 flex items-center gap-1">🌞 UV Index</label> | |
| <span className={`text-sm font-black ${uvModifier > 0 ? 'text-orange-600' : uvModifier < 0 ? 'text-blue-500' : 'text-slate-500'}`}> | |
| {uvModifier > 0 ? '+' : ''}{uvModifier} | |
| </span> | |
| </div> | |
| <input | |
| type="range" min="-3" max="5" step="1" value={uvModifier} onChange={(e) => setUvModifier(parseInt(e.target.value))} | |
| className="w-full h-2 bg-slate-200 rounded-lg appearance-none cursor-pointer accent-orange-500" | |
| /> | |
| <div className="flex justify-between text-[10px] text-slate-400 mt-1 font-bold">Less UV <span className="text-right">Extreme UV</span></div> | |
| </div> | |
| {/* Pressure Slider */} | |
| <div className="bg-slate-50 p-4 rounded-2xl border border-slate-100"> | |
| <div className="flex justify-between items-center mb-2"> | |
| <label className="text-sm font-bold text-slate-700 flex items-center gap-1">⏱️ Pressure</label> | |
| <span className={`text-sm font-black ${pressureModifier !== 0 ? 'text-purple-600' : 'text-slate-500'}`}> | |
| {pressureModifier > 0 ? '+' : ''}{pressureModifier} hPa | |
| </span> | |
| </div> | |
| <input | |
| type="range" min="-20" max="20" step="2" value={pressureModifier} onChange={(e) => setPressureModifier(parseInt(e.target.value))} | |
| className="w-full h-2 bg-slate-200 rounded-lg appearance-none cursor-pointer accent-slate-600" | |
| /> | |
| <div className="flex justify-between text-[10px] text-slate-400 mt-1 font-bold">Low Pressure <span className="text-right">High Pressure</span></div> | |
| </div> | |
| </div> | |
| </div> | |
| ); | |
| } | |