Add live weather alerts

src/Dashboard.jsx

@@ -4,6 +4,7 @@ import Config from "./components/Config";
 import Music from "./components/Music";
 import Notices from "./components/Notices";
 import SpaceInfo from "./components/SpaceInfo";
+import WeatherAlerts from "./components/WeatherAlerts";
 import useSpotify from "./hooks/useSpotify";
 import useTime from "./hooks/useTime";
 
@@ -40,6 +41,7 @@ export default function Dashboard({}) {
                 height="100%"
                 maxHeight="100%"
             > */}
+                <WeatherAlerts />
                 <Flex direction="row" height="100%" minHeight="0px" width="100%" position="relative">
                     <Box width="auto" height="100%" className="border-r-[3px] border-solid border-[--sand-7]">
                         <SpaceInfo />

src/components/WeatherAlerts.jsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import useWeatherAlerts from '../hooks/useWeatherAlerts';
+import { Box } from "@radix-ui/themes";
+import { useState, useEffect } from 'react';
+import { AnimatePresence, motion } from "motion/react";
+
+const WeatherAlerts = () => {
+    const { alerts } = useWeatherAlerts();
+
+    const [currentAlertIndex, setCurrentAlertIndex] = useState(0);
+
+    useEffect(() => {
+        const interval = setInterval(() => {
+            setCurrentAlertIndex((prevIndex) => (prevIndex + 1) % alerts.length);
+        }, 10000);
+
+        return () => clearInterval(interval);
+    }, [alerts.length]);
+
+    if (!alerts || alerts.length === 0) {
+        return null;
+    }
+
+    return (
+        <Box
+            height="auto"
+            width="100%"
+            className="border-b-[3px] border-solid border-[--sand-7] bg-red-800 text-red-100 text-5xl px-8 py-4 font-bold"
+        >
+            <AnimatePresence mode="wait">
+                <motion.div
+                    key={alerts[currentAlertIndex].properties.event}
+                    initial={{ opacity: 0 }}
+                    animate={{ opacity: 1 }}
+                    exit={{ opacity: 0 }}
+                    transition={{ duration: 0.5 }}
+                >
+                    <span className="font-bold">
+                        {alerts[currentAlertIndex].properties.event} until {new Date(alerts[currentAlertIndex].properties.expires).toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' })}
+                    </span>
+                </motion.div>
+            </AnimatePresence>
+        </Box>
+    );
+};
+
+export default WeatherAlerts;

src/hooks/useWeatherAlerts.jsx

@@ -0,0 +1,36 @@
+import { useState, useEffect } from 'react';
+
+export default function useWeatherAlerts() {
+    const [alerts, setAlerts] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+
+    useEffect(() => {
+        const fetchWeatherAlerts = async () => {
+            try {
+                setLoading(true);
+                const response = await fetch(
+                    `https://api.weather.gov/alerts/active/zone/GAC121`
+                );
+
+                if (!response.ok) {
+                    throw new Error('Failed to fetch weather alerts');
+                }
+
+                const data = await response.json();
+                setAlerts(data.features || []);
+            } catch (err) {
+                setError(err.message);
+            } finally {
+                setLoading(false);
+            }
+        };
+
+        fetchWeatherAlerts();
+
+        const interval = setInterval(fetchWeatherAlerts, 60000); // Refresh every 60 seconds
+        return () => clearInterval(interval);
+    }, []);
+
+    return { alerts, loading, error };
+};