feat: add weather widget

src/components/ui/sections/WeatherSection.astro

@@ -0,0 +1,58 @@
+---
+import { getFiveDayForecast } from '@support/weather';
+
+const { latitude = "44.95", longitude = "-93.09", cityName = "St. Paul, Minnesota" } = Astro.props;
+const { forecastDays, error } = await getFiveDayForecast(latitude, longitude);
+
+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">
+        5 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>