Add online status indicator with dynamic border styling in Index component

app/routes/_index.tsx

@@ -43,6 +43,36 @@ export async function loader() {
 
 export default function Index() {
 	const { posts } = useLoaderData<typeof loader>();
+	const [status, setStatus] = useState("");
+	const [border_status, setBorderStatus] = useState("border-gray-700");
+
+	useEffect(() => {
+		if (status === "online") {
+			setBorderStatus("border-green-500");
+		} else if (status === "offline") {
+			setBorderStatus("border-red-500");
+		} else if (status === "dnd") {
+			setBorderStatus("border-red-600");
+		} else if (status === "idle") {
+			setBorderStatus("border-yellow-500");
+		} else {
+			setBorderStatus("border-gray-700");
+		}
+	}, [status]);
+
+	useEffect(() => {
+		fetch(
+			"https://shsf-api.cottonfieldworkers.shop/api/exec/6/c084ec4a-1b20-491e-ab2e-67c5fa8881e6"
+		)
+			.then((res) => res.json())
+			.then((data) => {
+				setStatus(data.status);
+			})
+			.catch((err) => {
+				console.error(err);
+				setStatus("offline");
+			});
+	}, []);
 
 	return (
 		<div className="relative flex min-h-screen flex-col items-center justify-center p-8 overflow-hidden">
@@ -74,7 +104,9 @@ export default function Index() {
 							<span className="font-bold text-gray-200">Space</span> online
 						</h2>
 					</div>
-					<div className="w-48 h-48 mx-auto overflow-hidden rounded-full border-4 border-gray-700 hover:border-blue-500 transition-colors duration-300">
+					<div
+						className={`w-48 h-48 mx-auto overflow-hidden rounded-full border-4 transition-colors duration-300 ${border_status}`}
+					>
 						<img
 							src="https://cdn.reversed.dev/pictures/cat.png"
 							alt="Paul W"