44 lines
1.5 KiB
Plaintext
44 lines
1.5 KiB
Plaintext
---
|
|
import WeatherCard from '@components/cards/WeatherCard.astro';
|
|
import { getFiveDayForecast } from '@/scripts/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);
|
|
---
|
|
|
|
<section class="max-w-340 2xl:max-w-full px-4 sm:px-6 lg:px-8 py-10 lg:py-14 mx-auto mb-2 md:mb-8">
|
|
<div class="text-center max-w-2xl mx-auto mb-10 lg:mb-14">
|
|
<h1 class="smooth-reveal card-text-header block">
|
|
Weather in my Area
|
|
</h1>
|
|
<div class="smooth-reveal mx-auto mt-5 max-w-3xl text-center">
|
|
<span class="card-text-header-description">
|
|
Five day forecast for {cityName}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
{error ? (
|
|
<div class="smooth-reveal flex flex-wrap justify-center gap-4 lg:gap-6">
|
|
<div class="card-base flex flex-col justify-center items-center p-10 w-48 h-56">
|
|
<h1 class="card-text-header block text-accent text-center">
|
|
Sorry, {error.toLowerCase()}
|
|
</h1>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div class="flex flex-wrap justify-center gap-4 lg:gap-6">
|
|
{forecastDays.map((forecastDay, index) => (
|
|
<div class={index === 3 ? "hidden min-[800px]:block" : index >= 4 ? "hidden min-[1100px]:block" : ""}>
|
|
<WeatherCard
|
|
dayName={forecastDay.dayName}
|
|
label={forecastDay.label}
|
|
icon={forecastDay.icon}
|
|
temp={forecastDay.temp}
|
|
/>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</section>
|