administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2025-12-12 16:16:42 +03:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

add dots variant to step indicator

Browse Source
This commit is contained in:
Josh Hawkins 2025-10-10 12:06:26 -05:00
parent 1bb35380e6
commit ef3e9bccd3
1 changed files with 25 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
web/src/components/indicators/StepIndicator.tsx
View File

@ -4,15 +4,39 @@ import { useTranslation } from "react-i18next";
type StepIndicatorProps = {
steps: string[];
currentStep: number;
translationNameSpace: string;
variant?: "default" | "dots";
translationNameSpace?: string;
};
export default function StepIndicator({
steps,
currentStep,
variant = "default",
translationNameSpace,
}: StepIndicatorProps) {
const { t } = useTranslation(translationNameSpace);
if (variant == "dots") {
return (
<div className="flex flex-row justify-center gap-2">
{steps.map((_, idx) => (
<div
key={idx}
className={cn(
"size-2 rounded-full transition-colors",
currentStep === idx
? "bg-selected"
: currentStep > idx
? "bg-muted-foreground"
: "bg-muted",
)}
/>
))}
</div>
);
}
// Default variant (original behavior)
return (
<div className="flex flex-row justify-evenly">
{steps.map((name, idx) => (