43 lines
No EOL
1.4 KiB
TypeScript
43 lines
No EOL
1.4 KiB
TypeScript
"use client"
|
|
import { useGlobalContext } from '@/app/context/globalContext';
|
|
import { Skeleton } from '@/components/ui/skeleton';
|
|
import React from 'react'
|
|
import { MdVisibility } from "react-icons/md";
|
|
|
|
const Visibility = () => {
|
|
const {forecast} = useGlobalContext();
|
|
if(!forecast || !forecast?.visibility){
|
|
return <Skeleton className='h-[12rem] w-full'/>
|
|
}
|
|
const {visibility} = forecast;
|
|
|
|
const visibilityData = (visibility: number) => {
|
|
const visibilityInMiles = Math.round((visibility / 1000) * 0.621);
|
|
if(visibilityInMiles <= 1 )
|
|
return "Thick fog"
|
|
if(visibilityInMiles <= 2 )
|
|
return "Haze"
|
|
if(visibilityInMiles <= 6 )
|
|
return "Light haze"
|
|
if(visibilityInMiles <= 12 )
|
|
return "Clear"
|
|
if(visibilityInMiles <= 31 )
|
|
return "Very Clear"
|
|
if(visibilityInMiles > 31 )
|
|
return "Exceptionally clear"
|
|
return "Pure Air"
|
|
}
|
|
|
|
|
|
return (
|
|
<div className='flex flex-col justify-center gap-5 dark:bg-darkGgray shadow-sm dark:shadow-none sm-2:col-span-2 px-4 h-[12rem] border rounded-lg'>
|
|
<div>
|
|
<h2 className='flex items-center gap-2'><MdVisibility/> Visibility</h2>
|
|
<p className='pt-4 text-2xl'>{Math.round((visibility / 1000) * 0.621)} mi</p>
|
|
</div>
|
|
<p className='text-sm'>{visibilityData(visibility)}</p>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Visibility |