task status implementation

2026-02-17 17:00:00 -06:00
parent 3d6e29d2c0
commit b8f5db030c
5 changed files with 196 additions and 39 deletions
@@ -0,0 +1,67 @@
+import { type Component } from "solid-js";
+import { CheckCircle2 } from "lucide-solid";
+import { cn } from "@/lib/utils";
+
+interface StatusCircleProps {
+    status: number;
+    size?: number;
+    className?: string;
+}
+
+export const StatusCircle: Component<StatusCircleProps> = (props) => {
+    const size = () => props.size || 24;
+    const radius = () => (size() / 2) - 2; // Subtract stroke width/padding
+    const circumference = () => 2 * Math.PI * radius();
+
+    // Status 0: Empty Circle
+    // Status 10: CheckCircle2 (Green)
+    // Status 1-9: Progress Ring
+
+    const strokeDashoffset = () => {
+        // Invert to fill clockwise?
+        // Progress 1-9. 
+        // 1 = 10%, 9 = 90%
+        const percentage = Math.max(0, Math.min(10, props.status)) / 10;
+        return circumference() * (1 - percentage);
+    };
+
+    return (
+        <div class={cn("relative flex items-center justify-center", props.className)} style={{ width: `${size()}px`, height: `${size()}px` }}>
+            {props.status >= 10 ? (
+                <CheckCircle2 size={size()} class="text-green-500" />
+            ) : (
+                // Progress Circle
+                <div class="relative group">
+                    {/* Background Circle (Ghost) */}
+                    <svg width={size()} height={size()} class="rotate-[-90deg]">
+                        <circle
+                            cx={size() / 2}
+                            cy={size() / 2}
+                            r={radius()}
+                            fill="transparent"
+                            stroke="currentColor"
+                            stroke-width="2"
+                            class="text-muted-foreground/20"
+                        />
+                        {/* Progress Arc */}
+                        <circle
+                            cx={size() / 2}
+                            cy={size() / 2}
+                            r={radius()}
+                            fill="transparent"
+                            stroke="currentColor"
+                            stroke-width="2"
+                            stroke-dasharray={circumference().toString()}
+                            stroke-dashoffset={strokeDashoffset()}
+                            stroke-linecap="round"
+                            class="text-primary transition-all duration-300"
+                        />
+                    </svg>
+                    {/* Hover indicator (maybe show check on hover?) 
+                        User didn't ask for generic hover, just visual update.
+                    */}
+                </div>
+            )}
+        </div>
+    );
+};