add classname

This commit is contained in:
Josh Hawkins 2025-10-10 13:16:25 -05:00
parent ef3e9bccd3
commit 4a34451232

View File

@ -6,6 +6,7 @@ type StepIndicatorProps = {
currentStep: number; currentStep: number;
variant?: "default" | "dots"; variant?: "default" | "dots";
translationNameSpace?: string; translationNameSpace?: string;
className?: string;
}; };
export default function StepIndicator({ export default function StepIndicator({
@ -13,17 +14,18 @@ export default function StepIndicator({
currentStep, currentStep,
variant = "default", variant = "default",
translationNameSpace, translationNameSpace,
className,
}: StepIndicatorProps) { }: StepIndicatorProps) {
const { t } = useTranslation(translationNameSpace); const { t } = useTranslation(translationNameSpace);
if (variant == "dots") { if (variant == "dots") {
return ( return (
<div className="flex flex-row justify-center gap-2"> <div className={cn("flex flex-row justify-center gap-2", className)}>
{steps.map((_, idx) => ( {steps.map((_, idx) => (
<div <div
key={idx} key={idx}
className={cn( className={cn(
"size-2 rounded-full transition-colors", "size-3 rounded-full border border-primary/10 transition-colors",
currentStep === idx currentStep === idx
? "bg-selected" ? "bg-selected"
: currentStep > idx : currentStep > idx
@ -38,7 +40,7 @@ export default function StepIndicator({
// Default variant (original behavior) // Default variant (original behavior)
return ( return (
<div className="flex flex-row justify-evenly"> <div className={cn("flex flex-row justify-evenly", className)}>
{steps.map((name, idx) => ( {steps.map((name, idx) => (
<div key={idx} className="flex flex-col items-center gap-2"> <div key={idx} className="flex flex-col items-center gap-2">
<div <div