You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
35 lines
925 B
35 lines
925 B
import type { ReactNode } from "react";
|
|
import { SHOW_INTRO_VIDEOS } from "@/config/features";
|
|
import { useI18n } from "@/translations/provider";
|
|
|
|
type SliderHeaderProps = {
|
|
index: number;
|
|
title: ReactNode;
|
|
totalSteps?: number;
|
|
stepLabel?: string;
|
|
};
|
|
|
|
export function SliderHeader({
|
|
index,
|
|
title,
|
|
totalSteps = SHOW_INTRO_VIDEOS ? 5 : 4,
|
|
stepLabel,
|
|
}: SliderHeaderProps) {
|
|
const { dictionary: t } = useI18n();
|
|
const tRecord = t as Record<string, string>;
|
|
|
|
const defaultStepLabel = (tRecord["Step {step} of {total}"] || "Step {step} of {total}")
|
|
.replace("{step}", String(index + 1))
|
|
.replace("{total}", String(totalSteps));
|
|
|
|
return (
|
|
<div className="text-center">
|
|
<p className="text-[#747474] group-10 font-semibold">
|
|
{stepLabel || defaultStepLabel}
|
|
</p>
|
|
<p className="text-[#111111] group-16 font-bold">{title}</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default SliderHeader;
|