added uv index component

weather_app/app/components/airPollution/AirPollution.tsx

@@ -12,8 +12,8 @@ const AirPollution = () => {
         return <Skeleton className='h-[12rem] w-full col-span-2 md:col-span-full'/>
     }
     const airQualityIndex = airPollution.list[0].main.aqi * 10;
-    console.log(airQualityIndex)
-    //filter aqi
+    //console.log(airQualityIndex)
+    //filter api
     const filterAQI = air_QualityIndex.find((item) => {
         return item.rating === airQualityIndex;
     })

weather_app/app/components/uvIndex/UVI.tsx

@@ -1,10 +1,64 @@
 "use client"
+import { useGlobalContext } from '@/app/context/globalContext'
+import { Skeleton } from '@/components/ui/skeleton';
+import { Progress } from '@/components/ui/progress';
 import React from 'react'
+import { TbUvIndex } from "react-icons/tb";
 
 const UVI = () => {
+    const {uvIndex} = useGlobalContext();
+    if(!uvIndex || !uvIndex.daily){
+        return <Skeleton className='h-[12rem] w-full'/>
+    }
+    const {daily} = uvIndex;
+    const {uv_index_clearsky_max, uv_index_max} = daily;
+    const uvIndexMax = uv_index_max[0].toFixed(0);
+    const uvIndexScale = (uvIndex: number) => {
+        if(uvIndex <= 2){
+            return{
+                text: "Low",
+                desc: "No protection needed"
+            };
+        }
+        else if(uvIndex <= 5){
+            return{
+                text: "Moderate",
+                desc: "Some protection is required"
+            };
+        }
+        else if(uvIndex <= 7){
+            return{
+                text: "High",
+                desc: "Protection essential"
+            };
+        }
+        else if(uvIndex <= 10){
+            return{
+                text: "Very High",
+                desc: "Extra protection is needed"
+            };
+        }
+        else{
+            return{
+                text: "Extreme",
+                desc: "Stay inside"
+            };
+        }
+    }
+    const leftProgress = (uvIndexMax / 12) * 100;
+
+
   return (
-    <div className='flex flex-col gap-5 justify-center dark:bg-darkGgray shadow-sm dark:shadow-none sm-2:col-span-2 px-5 h-[12rem] border rounded-lg'>
-        UVI
+    <div className='flex flex-col gap-8 dark:bg-darkGgray shadow-sm dark:shadow-none pt-6 px-4 h-[12rem] border rounded-lg col-span-full sm-2:col-span-2 md:col-span-2 xl:col-span-2'>
+        <div>
+           <h2 className='flex items-center gap-1 '><TbUvIndex />UV Index</h2> 
+           <div className='flex items-center gap-1 pb-2 pt-6'>
+            <p>{uvIndexMax}</p>
+            <span className='text-xs'>({uvIndexScale(uvIndexMax).text})</span>
+           </div>
+           <Progress value={leftProgress} className='air-progress' max={12}/>
+        </div>
+        <p className='text-xs'>{uvIndexScale(uvIndexMax).desc}</p>
     </div>
   )
 }

weather_app/app/context/globalContext.js

@@ -3,8 +3,6 @@ import axios from "axios";
 import React, { createContext, useContext, useEffect, useState } from "react"
 
 
-
-
 const GlobalContext = createContext();
 const GlobalContextUpdate = createContext();
 
@@ -13,6 +11,7 @@ export const GlobalContextProvider = ({children}) => {
     const [forecast, setForecast] = useState({});
     const [airPollution, setAirPollution] = useState({});
     const [dailyForecast, setDailyForecast] = useState({});
+    const [uvIndex, setUvIndex] = useState({});
 
     const fetchForecast = async() => {
         try {
@@ -36,7 +35,16 @@ export const GlobalContextProvider = ({children}) => {
             const res = await axios.get("api/dailyForecast")
             setDailyForecast(res.data)
         } catch (error) {
-            console.log("Error fetching air pollution data:", error.message)
+            console.log("Error fetching air forcast data:", error.message)
+        }
+    };
+    const fetchUVIndex = async() => {
+        try {
+            const res = await axios.get("api/uvIndex")
+            setUvIndex(res.data)
+
+        } catch (error) {
+            console.log("Error fetching air UVI data:", error.message)
         }
     }
  
@@ -44,10 +52,11 @@ export const GlobalContextProvider = ({children}) => {
         fetchForecast();
         fetchAirPollution();
         fetchDailyForecast();
+        fetchUVIndex();
     }, []);
 
     return(
-        <GlobalContext.Provider value={{forecast, airPollution, dailyForecast}}>
+        <GlobalContext.Provider value={{forecast, airPollution, dailyForecast, uvIndex}}>
             <GlobalContextUpdate.Provider>{children}</GlobalContextUpdate.Provider>
         </GlobalContext.Provider>
     )