"use client";
import { useEffect, useState } from "react";
import { motion, useReducedMotion, useSpring } from "motion/react";
import { JOB_STATES } from "@/lib/job-state";
import type { JobState } from "@/lib/api";
import { cn } from "@/lib/utils";
/** Number that springs to its new value. Falls back to a plain number when the
* user asked for reduced motion. */
export function Counter({ value, className }: { value: number; className?: string }) {
const still = useReducedMotion();
const spring = useSpring(0, { stiffness: 130, damping: 22 });
const [shown, setShown] = useState(0);
useEffect(() => {
spring.set(value);
}, [value, spring]);
useEffect(() => spring.on("change", (v) => setShown(Math.round(v))), [spring]);
return {still ? value : shown};
}
/** Job state as colour + icon + word. Never colour alone. */
export function StatusBadge({ state, className }: { state: JobState; className?: string }) {
const meta = JOB_STATES[state];
const Icon = meta.icon;
return (
{meta.label}
);
}
/** Live/offline dot. The ring only animates for the live case. */
export function PulseDot({ live, className }: { live: boolean; className?: string }) {
const still = useReducedMotion();
const color = live ? "var(--state-done)" : "var(--state-cancelled)";
return (
{live && !still && (
)}
);
}
export function EmptyState({
icon: Icon,
title,
hint,
action,
}: {
icon: React.ComponentType<{ className?: string }>;
title: string;
hint?: string;
action?: React.ReactNode;
}) {
return (
{title}
{hint &&
{hint}
}
{action}
);
}
/** Uppercase mono field label — the printed-form look used across the forms. */
export function FieldLabel({ children, htmlFor }: { children: React.ReactNode; htmlFor?: string }) {
return (
);
}