41 lines
No EOL
1.5 KiB
TypeScript
41 lines
No EOL
1.5 KiB
TypeScript
"use client"
|
|
import { useGlobalContext } from '@/app/context/globalContext';
|
|
import { kelvinToFarenheit } from '@/app/utils/Misc';
|
|
import { Skeleton } from '@/components/ui/skeleton';
|
|
import React from 'react'
|
|
import { BsThermometerHalf } from "react-icons/bs";
|
|
|
|
const FeelLike = () => {
|
|
const {forecast} = useGlobalContext();
|
|
if(!forecast || !forecast?.main || !forecast?.main?.feels_like){
|
|
return <Skeleton className='h-[12 rem] w-full'/>
|
|
}
|
|
const {feels_like, temp_min, temp_max} = forecast?.main;
|
|
const feelLike = (feelsLike: number, mintemp: number, maxTemp: number) => {
|
|
const avgTemp = (mintemp + maxTemp) /2;
|
|
if(feelsLike < avgTemp - 3){
|
|
return "Wind is making it feel colder";
|
|
}
|
|
if(feelsLike > avgTemp - 3 && feelsLike <= avgTemp + 3){
|
|
return "Similar to the actual temperature";
|
|
}
|
|
if(feelsLike > avgTemp + 3){
|
|
return "Sun is making it feel warm";
|
|
}
|
|
return "Temperature feelinf is typical for this range"
|
|
};
|
|
const feelLikeDesc = feelLike(feels_like, temp_min, temp_max);
|
|
|
|
|
|
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'>< BsThermometerHalf/> Feels Like</h2>
|
|
<p className='pt-4 text-2xl'>{kelvinToFarenheit(feels_like)} °F</p>
|
|
</div>
|
|
<p className='text-sm'>{feelLikeDesc}</p>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default FeelLike |