32 lines
No EOL
1.3 KiB
TypeScript
32 lines
No EOL
1.3 KiB
TypeScript
"use client"
|
|
import { useGlobalContext } from '@/app/context/globalContext'
|
|
import { air_QualityIndex } from '@/app/utils/Misc';
|
|
import { Progress } from '@/components/ui/progress';
|
|
import { Skeleton } from '@/components/ui/skeleton';
|
|
import React from 'react'
|
|
import { FaThermometerEmpty } from "react-icons/fa";
|
|
|
|
const AirPollution = () => {
|
|
const {airPollution} = useGlobalContext();
|
|
if(!airPollution || !airPollution.list || !airPollution.list[0] || !airPollution.list[0].main){
|
|
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 api
|
|
const filterAQI = air_QualityIndex.find((item) => {
|
|
return item.rating === airQualityIndex;
|
|
})
|
|
console.log(airQualityIndex)
|
|
|
|
|
|
return (
|
|
<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'>
|
|
<h2 className='flex items-center gap-1 '><FaThermometerEmpty/> Air Pollution</h2>
|
|
<Progress value={airQualityIndex} max={100} className='air-progress'/>
|
|
<p>Air quality is {filterAQI?.desc}</p>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default AirPollution |