79 lines
No EOL
2.6 KiB
TypeScript
79 lines
No EOL
2.6 KiB
TypeScript
"use client"
|
|
import { useGlobalContext } from '@/app/context/globalContext'
|
|
import { kelvinToFarenheit } from '@/app/utils/Misc';
|
|
import { CloudIcon, CloudRainIcon, SnowflakeIcon, SunIcon, Zap } from 'lucide-react';
|
|
import { IoNavigateOutline } from "react-icons/io5";
|
|
|
|
import React, { useEffect, useState } from 'react'
|
|
import moment from 'moment';
|
|
|
|
const Temperature = () => {
|
|
const {forecast} = useGlobalContext();
|
|
const {main, timezone, name, weather} = forecast;
|
|
if(!forecast || !weather){
|
|
return <div>Loading...</div>
|
|
}
|
|
const temp = kelvinToFarenheit(main?.temp);
|
|
const minTemp = kelvinToFarenheit(main?.temp_min);
|
|
const maxTemp = kelvinToFarenheit(main?.temp_max);
|
|
|
|
//set time, day, weather
|
|
const [localTime, setLocalTime] = useState<String>("");
|
|
const [currentDay, setCurrentDay] = useState<String>("");
|
|
const {main: weatherMain, description} = weather[0];
|
|
const getIcon = () => {
|
|
switch (weatherMain){
|
|
case "Snow":
|
|
return <SnowflakeIcon/>;
|
|
case "Rain":
|
|
return <CloudRainIcon/>;
|
|
case "Clear":
|
|
return <SunIcon/>;
|
|
case "Clouds":
|
|
return <CloudIcon/>;
|
|
case "Thunderstorm":
|
|
return <Zap/>;
|
|
}
|
|
};
|
|
|
|
//real time update
|
|
useEffect(() => {
|
|
const interval = setInterval(() => {
|
|
const localMoment = moment().utcOffset(timezone / 60);
|
|
const formatedTime = localMoment.format("hh:mm:ss");
|
|
const day = localMoment.format("dddd")
|
|
|
|
setLocalTime(formatedTime);
|
|
setCurrentDay(day);
|
|
}, 1000);
|
|
}, []);
|
|
|
|
|
|
|
|
|
|
return (
|
|
<div className='flex flex-col justify-between pt-6 px-4 pb-5 border rounded-lg dark:bg-darkGgray shadow-sm dark:shadow-none'>
|
|
<p className='flex justify-between items-center'>
|
|
<span className=''>{currentDay}</span>
|
|
<span className=''>{localTime}</span>
|
|
</p>
|
|
<p className='flex pt-2 font-bold gap-1'>
|
|
<span>{name}</span>
|
|
<span className=''><IoNavigateOutline/></span>
|
|
</p>
|
|
<p className='py-10 text-8xl font-bold self-center'>{temp}°F</p>
|
|
<div>
|
|
<div>
|
|
<span>{getIcon()}</span>
|
|
<p className='pt-2 capitalize text-lg'>{description}</p>
|
|
</div>
|
|
<p className='flex gap-1'>
|
|
<span>Low: {minTemp}°F</span>
|
|
<span>Hight: {maxTemp}°F</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Temperature |