59 lines
2.6 KiB
Plaintext
59 lines
2.6 KiB
Plaintext
---
|
|
import { getFiveDayForecast } from '@support/weather';
|
|
|
|
const { latitude = "44.95", longitude = "-93.09", cityName = "St. Paul, Minnesota", timezone = "America/Chicago" } = Astro.props;
|
|
const { forecastDays, error } = await getFiveDayForecast(latitude, longitude, timezone);
|
|
|
|
const borderClasses = 'border border-neutral-100 dark:border-stone-500/20';
|
|
const bgColorClasses = 'bg-neutral-100/80 hover:bg-neutral-100 dark:bg-neutral-800/60 dark:hover:bg-neutral-800/90';
|
|
const shadowClasses = 'shadow-xs hover:shadow-md dark:shadow-md dark:hover:shadow-lg';
|
|
---
|
|
|
|
<section class="mx-auto mb-20 max-w-340 px-4 py-10 sm:px-6 lg:px-8 lg:py-14 2xl:max-w-full">
|
|
<div class="mx-auto mb-10 max-w-2xl text-center lg:mb-14">
|
|
<h1 class="smooth-reveal block text-4xl font-bold text-neutral-800 md:text-5xl md:leading-tight lg:text-5xl dark:text-neutral-200">
|
|
Weather in my Area
|
|
</h1>
|
|
<div class="smooth-reveal mx-auto mt-5 max-w-3xl text-center">
|
|
<p class="text-lg text-pretty text-neutral-600 dark:text-neutral-400">
|
|
Five day forecast for {cityName}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{error ? (
|
|
<div class={`rounded-xl p-10 text-center text-yellow-500 ${borderClasses} ${bgColorClasses}`}>
|
|
{error}
|
|
</div>
|
|
) : (
|
|
<div class="flex flex-wrap justify-center gap-4 lg:gap-6">
|
|
{forecastDays.map((day) => (
|
|
<div class="smooth-reveal-2 group flex flex-col">
|
|
<div class={`rounded-xl duration-300 transition-all w-32 md:w-44 ${borderClasses} ${bgColorClasses} ${shadowClasses}`}>
|
|
<div class="p-4 text-center">
|
|
<span class="block text-xs font-bold tracking-widest text-neutral-500 uppercase dark:text-neutral-400">
|
|
{day.dayName}
|
|
</span>
|
|
<div class="flex justify-center my-2">
|
|
<img
|
|
src={`https://openweathermap.org/img/wn/${day.icon}@2x.png`}
|
|
alt={day.label}
|
|
class="h-12 w-12 drop-shadow-sm group-hover:scale-110 transition-transform duration-300"
|
|
/>
|
|
</div>
|
|
<div class="mt-2">
|
|
<span class="group-hover:text-steel dark:group-hover:text-bermuda transition-all duration-300 block text-2xl font-bold text-neutral-600 dark:text-neutral-300">
|
|
{day.temp}°F
|
|
</span>
|
|
<span class="mt-1 block text-xs text-neutral-500 dark:text-neutral-400 capitalize">
|
|
{day.label}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</section>
|