34 lines
No EOL
1.2 KiB
TypeScript
34 lines
No EOL
1.2 KiB
TypeScript
"use client"
|
|
import { useGlobalContext } from '@/app/context/globalContext'
|
|
import { unixToTime } from '@/app/utils/Misc';
|
|
import { Skeleton } from '@/components/ui/skeleton';
|
|
import React from 'react'
|
|
import { GiSunrise } from "react-icons/gi";
|
|
import { GiSunset } from "react-icons/gi";
|
|
|
|
const Sunset = () => {
|
|
const {forecast} = useGlobalContext();
|
|
if(!forecast || !forecast.sys || !forecast?.sys?.sunset){
|
|
return <Skeleton className='h-[12rem] w-full'/>
|
|
}
|
|
const times = forecast?.sys.sunset;
|
|
const timezone = forecast?.timezone;
|
|
const timeSunset = unixToTime(times, timezone)
|
|
const timeSunrise = unixToTime(forecast?.sys?.sunrise, timezone)
|
|
|
|
|
|
return (
|
|
<div className='flex flex-col gap-5 justify-center dark:bg-darkGgray shadow-sm dark:shadow-none sm-2:col-span-2 px-5 h-[12rem] border rounded-lg'>
|
|
<div className=''>
|
|
<h2 className='flex items-center gap-1 '><GiSunrise/>Sunrise</h2>
|
|
<p className='pt-2'>{timeSunrise} am</p>
|
|
</div>
|
|
<div className=''>
|
|
<h2 className='flex items-center gap-1 '><GiSunset/> Sunset</h2>
|
|
<p className='pt-2'>{timeSunset} pm</p>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Sunset |