feat: service tracker

src/components/ServiceTrackerClient.tsx

@@ -0,0 +1,62 @@
+import React from "react";
+import { cn } from "@/lib/utils";
+
+interface ServiceTrackerProps {
+  days: Array<{
+    completed: boolean;
+    date?: Date;
+  }>;
+  className?: string;
+  title?: string;
+  uptime?: number;
+}
+
+export const ServiceTrackerClient: React.FC<ServiceTrackerProps> = ({
+  days,
+  className,
+  title,
+  uptime = 100,
+}) => {
+  return (
+    <div
+      className={cn(
+        "w-full space-y-3 bg-white px-4 py-4 dark:bg-black  rounded-lg border bg-card text-card-foreground shadow-lg shadow-neutral-200/40 dark:shadow-none",
+        className,
+      )}
+    >
+      <div className="flex justify-between items-center">
+        <div className="flex items-center gap-2">
+          <div className="w-5 h-5 rounded-full bg-green-600 flex items-center justify-center">
+            <div className="w-3 h-3 rounded-full bg-white dark:bg-black" />
+          </div>
+          <span className="font-medium text-sm">{title}</span>
+        </div>
+        <span className="text-green-600 font-medium text-sm">
+          {uptime.toFixed(1)}% uptime
+        </span>
+      </div>
+
+      <div className="flex gap-[2px]">
+        {days.map((day, index) => (
+          <div
+            key={index}
+            className={cn(
+              "flex-1 h-6 rounded-[5px] transition-colors",
+              day.completed ? "bg-green-600" : "bg-red-500",
+            )}
+            title={
+              day.date ? day.date.toLocaleDateString() : `Day ${index + 1}`
+            }
+          />
+        ))}
+      </div>
+
+      <div className="flex justify-between text-xs text-stone-500 dark:text-stone-400">
+        <span>30 DAYS AGO</span>
+        <span>TODAY</span>
+      </div>
+    </div>
+  );
+};
+
+export default ServiceTrackerClient;