added pressure component
This commit is contained in:
parent
447c0125e5
commit
2b26060093
1 changed files with 33 additions and 0 deletions
33
weather_app/app/components/pressure/Pressure.tsx
Normal file
33
weather_app/app/components/pressure/Pressure.tsx
Normal file
|
@ -0,0 +1,33 @@
|
|||
"use client"
|
||||
import { useGlobalContext } from '@/app/context/globalContext';
|
||||
import { Skeleton } from '@/components/ui/skeleton';
|
||||
import React from 'react'
|
||||
import { LiaCloudscale } from "react-icons/lia";
|
||||
|
||||
const Pressure = () => {
|
||||
const {forecast} = useGlobalContext();
|
||||
if(!forecast || !forecast?.main || !forecast?.main?.pressure){
|
||||
return <Skeleton className='h-[12rem] w-full'/>
|
||||
}
|
||||
const {pressure} = forecast?.main;
|
||||
const pressureData = (pressure: number) => {
|
||||
const pressureIninHg = Math.round(pressure * 0.0295);
|
||||
if(pressureIninHg < 28 )
|
||||
return "Low"
|
||||
if(pressureIninHg >= 28 && pressureIninHg <= 30 )
|
||||
return "Normal"
|
||||
return "High"
|
||||
}
|
||||
|
||||
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'><LiaCloudscale/> Pressure</h2>
|
||||
<p className='pt-4 text-2xl'>{Math.round(pressure * 0.0295)} inHg</p>
|
||||
</div>
|
||||
<p className='text-sm'>{pressureData(pressure)}</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Pressure
|
Loading…
Add table
Reference in a new issue