48 lines
1.0 KiB
TypeScript
48 lines
1.0 KiB
TypeScript
import { cn } from "@/lib/utils";
|
|
|
|
export function Progress({
|
|
value,
|
|
tone = "signal",
|
|
className,
|
|
}: {
|
|
value: number;
|
|
tone?: "signal" | "amber" | "vermilion";
|
|
className?: string;
|
|
}) {
|
|
const pct = Math.max(0, Math.min(100, value));
|
|
const color =
|
|
tone === "vermilion"
|
|
? "var(--color-vermilion)"
|
|
: tone === "amber"
|
|
? "var(--color-amber)"
|
|
: "var(--color-signal)";
|
|
return (
|
|
<div
|
|
className={cn(
|
|
"h-1.5 w-full overflow-hidden rounded-full bg-hairline",
|
|
className,
|
|
)}
|
|
>
|
|
<div
|
|
className="h-full rounded-full transition-[width] duration-500"
|
|
style={{
|
|
width: `${pct}%`,
|
|
background: color,
|
|
boxShadow: `0 0 12px -2px ${color}`,
|
|
}}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function Spinner({ className }: { className?: string }) {
|
|
return (
|
|
<span
|
|
className={cn(
|
|
"inline-block size-4 animate-spin rounded-full border-2 border-hairline border-t-signal",
|
|
className,
|
|
)}
|
|
/>
|
|
);
|
|
}
|