add rainfall sum

resources/js/pages/Weather.tsx

@@ -101,6 +101,7 @@ const WeatherCard: FC<{date: string, values: WeatherValue[]}> = ({date, values=
     const [showDetails, setShowDetails] = useState(false)
 
     useEffect(() => {
+        console.log(values)
         const weatherState = {
             min: 100,
             max: -100,
@@ -161,21 +162,27 @@ const WeatherCard: FC<{date: string, values: WeatherValue[]}> = ({date, values=
                 <span className="text-secondary dark:text-secondary-ligth">{weatherState?.min.toFixed()} °C</span>
             </div>
         </div>
-        <ul className={`${showDetails ? 'h-44 opacity-100' : 'h-0 opacity-0'} flex gap-2 overflow-hidden overflow-x-auto transition-all`}>
-            {values.map(value => <li key={value.dt} className="w-40">
-                <div className="text-center">{Number(value.dt_txt.split(' ')[1].split(':')[0])} h</div>
-                <div>
-                    <Img src={`images/icons/${value.weather[0].icon.replace('n', 'd')}.svg`}
-                         alt={weatherState?.main + ' ' + weatherState?.icon}
-                         width="80px"/>
-                </div>
-                <div className="text-center">
-                    <span className="font-bold">
-                        {value.main.temp}
-                    </span> °C
-                </div>
-                {value.weather[0].description}
-            </li>)}
-        </ul>
+        <WeatherDetails showDetails={showDetails} closeDetails={() => showDetails(false)} values={values} />
     </>
 }
+
+const WeatherDetails: FC<{showDetails: boolean, closeDetails: () => void, values: WeatherValue[]}> = ({showDetails, closeDetails, values}) => {
+
+    return <ul onClick={closeDetails}
+        className={`${showDetails ? 'h-44 opacity-100' : 'h-0 opacity-0'} flex gap-2 overflow-hidden overflow-x-auto transition-all`}>
+        {values.map(value => <li key={value.dt} className="w-40">
+            <div className="text-center">{Number(value.dt_txt.split(' ')[1].split(':')[0])} h</div>
+            <div>
+                <Img src={`images/icons/${value.weather[0].icon.replace('n', 'd')}.svg`}
+                     alt={value.weather[0].description}
+                     width="80px"/>
+            </div>
+            <div className="text-center">
+                <span className="font-bold">
+                    {value.main.temp}
+                </span> °C
+            </div>
+            {value.weather[0].description}
+        </li>)}
+    </ul>
+}