feat: service tracker

src/components/ServiceTracker.tsx

@@ -0,0 +1,56 @@
+import React from "react";
+import ServiceTrackerClient from "./ServiceTrackerClient";
+import { useQuery } from "@tanstack/react-query";
+import { fetchService } from "@/lib/nezha-api";
+import { ServiceData } from "@/types/nezha-api";
+
+export const ServiceTracker: React.FC = () => {
+  const { data: serviceData, isLoading } = useQuery({
+    queryKey: ["service"],
+    queryFn: () => fetchService(),
+    refetchOnMount: true,
+    refetchOnWindowFocus: true,
+    refetchInterval: 10000,
+  });
+
+  const processServiceData = (serviceData: ServiceData) => {
+    const days = serviceData.up.map((up, index) => ({
+      completed: up > serviceData.down[index],
+      date: new Date(Date.now() - (29 - index) * 24 * 60 * 60 * 1000),
+    }));
+
+    const totalUp = serviceData.up.reduce((a, b) => a + b, 0);
+    const totalChecks =
+      serviceData.up.reduce((a, b) => a + b, 0) +
+      serviceData.down.reduce((a, b) => a + b, 0);
+    const uptime = (totalUp / totalChecks) * 100;
+
+    return { days, uptime };
+  };
+
+  if (isLoading) {
+    return <div className="mt-4">Loading...</div>;
+  }
+
+  if (!serviceData?.data?.services) {
+    return <div className="mt-4">No service data available</div>;
+  }
+
+  return (
+    <div className="mt-4 w-full mx-auto grid grid-cols-1 md:grid-cols-2 gap-2 md:gap-4">
+      {Object.entries(serviceData.data.services).map(([name, data]) => {
+        const { days, uptime } = processServiceData(data);
+        return (
+          <ServiceTrackerClient
+            key={name}
+            days={days}
+            title={data.service.name}
+            uptime={uptime}
+          />
+        );
+      })}
+    </div>
+  );
+};
+
+export default ServiceTracker;