added uv index component
This commit is contained in:
parent
84bb179392
commit
f0a6ba7bc1
3 changed files with 71 additions and 8 deletions
|
@ -12,8 +12,8 @@ const AirPollution = () => {
|
||||||
return <Skeleton className='h-[12rem] w-full col-span-2 md:col-span-full'/>
|
return <Skeleton className='h-[12rem] w-full col-span-2 md:col-span-full'/>
|
||||||
}
|
}
|
||||||
const airQualityIndex = airPollution.list[0].main.aqi * 10;
|
const airQualityIndex = airPollution.list[0].main.aqi * 10;
|
||||||
console.log(airQualityIndex)
|
//console.log(airQualityIndex)
|
||||||
//filter aqi
|
//filter api
|
||||||
const filterAQI = air_QualityIndex.find((item) => {
|
const filterAQI = air_QualityIndex.find((item) => {
|
||||||
return item.rating === airQualityIndex;
|
return item.rating === airQualityIndex;
|
||||||
})
|
})
|
||||||
|
|
|
@ -1,10 +1,64 @@
|
||||||
"use client"
|
"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 React from 'react'
|
||||||
|
import { TbUvIndex } from "react-icons/tb";
|
||||||
|
|
||||||
const UVI = () => {
|
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 (
|
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'>
|
<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'>
|
||||||
UVI
|
<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>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
|
@ -3,8 +3,6 @@ import axios from "axios";
|
||||||
import React, { createContext, useContext, useEffect, useState } from "react"
|
import React, { createContext, useContext, useEffect, useState } from "react"
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
const GlobalContext = createContext();
|
const GlobalContext = createContext();
|
||||||
const GlobalContextUpdate = createContext();
|
const GlobalContextUpdate = createContext();
|
||||||
|
|
||||||
|
@ -13,6 +11,7 @@ export const GlobalContextProvider = ({children}) => {
|
||||||
const [forecast, setForecast] = useState({});
|
const [forecast, setForecast] = useState({});
|
||||||
const [airPollution, setAirPollution] = useState({});
|
const [airPollution, setAirPollution] = useState({});
|
||||||
const [dailyForecast, setDailyForecast] = useState({});
|
const [dailyForecast, setDailyForecast] = useState({});
|
||||||
|
const [uvIndex, setUvIndex] = useState({});
|
||||||
|
|
||||||
const fetchForecast = async() => {
|
const fetchForecast = async() => {
|
||||||
try {
|
try {
|
||||||
|
@ -36,7 +35,16 @@ export const GlobalContextProvider = ({children}) => {
|
||||||
const res = await axios.get("api/dailyForecast")
|
const res = await axios.get("api/dailyForecast")
|
||||||
setDailyForecast(res.data)
|
setDailyForecast(res.data)
|
||||||
} catch (error) {
|
} 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();
|
fetchForecast();
|
||||||
fetchAirPollution();
|
fetchAirPollution();
|
||||||
fetchDailyForecast();
|
fetchDailyForecast();
|
||||||
|
fetchUVIndex();
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
return(
|
return(
|
||||||
<GlobalContext.Provider value={{forecast, airPollution, dailyForecast}}>
|
<GlobalContext.Provider value={{forecast, airPollution, dailyForecast, uvIndex}}>
|
||||||
<GlobalContextUpdate.Provider>{children}</GlobalContextUpdate.Provider>
|
<GlobalContextUpdate.Provider>{children}</GlobalContextUpdate.Provider>
|
||||||
</GlobalContext.Provider>
|
</GlobalContext.Provider>
|
||||||
)
|
)
|
||||||
|
|
Loading…
Add table
Reference in a new issue