counterweight
246553c402
- Expand exchange.json with all exchange page strings (page, steps, detailsStep, bookingStep, confirmationStep, priceDisplay) - Create trades.json translation files for es, en, ca - Create invites.json translation files for es, en, ca - Create profile.json translation files for es, en, ca - Translate exchange page and all components (ExchangeDetailsStep, BookingStep, ConfirmationStep, StepIndicator, PriceDisplay) - Translate trades page (titles, sections, buttons, status labels) - Translate invites page (titles, sections, status badges, copy button) - Translate profile page (form labels, hints, placeholders, messages) - Update IntlProvider to load all new namespaces - All frontend tests passing
100 lines
2.4 KiB
TypeScript
100 lines
2.4 KiB
TypeScript
"use client";
|
|
|
|
import { CSSProperties } from "react";
|
|
import { useTranslation } from "../../hooks/useTranslation";
|
|
|
|
type WizardStep = "details" | "booking" | "confirmation";
|
|
|
|
interface StepIndicatorProps {
|
|
currentStep: WizardStep;
|
|
}
|
|
|
|
const styles: Record<string, CSSProperties> = {
|
|
stepIndicator: {
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
gap: "1rem",
|
|
marginBottom: "2rem",
|
|
},
|
|
step: {
|
|
display: "flex",
|
|
alignItems: "center",
|
|
gap: "0.5rem",
|
|
opacity: 0.4,
|
|
},
|
|
stepActive: {
|
|
opacity: 1,
|
|
},
|
|
stepCompleted: {
|
|
opacity: 0.7,
|
|
},
|
|
stepNumber: {
|
|
fontFamily: "'DM Mono', monospace",
|
|
width: "28px",
|
|
height: "28px",
|
|
borderRadius: "50%",
|
|
background: "rgba(255, 255, 255, 0.1)",
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
fontSize: "0.875rem",
|
|
fontWeight: 600,
|
|
color: "#fff",
|
|
},
|
|
stepLabel: {
|
|
fontFamily: "'DM Sans', system-ui, sans-serif",
|
|
fontSize: "0.875rem",
|
|
color: "#fff",
|
|
},
|
|
stepDivider: {
|
|
width: "40px",
|
|
height: "1px",
|
|
background: "rgba(255, 255, 255, 0.2)",
|
|
},
|
|
};
|
|
|
|
/**
|
|
* Component that displays the wizard step indicator.
|
|
* Shows which step the user is currently on and which steps are completed.
|
|
*/
|
|
export function StepIndicator({ currentStep }: StepIndicatorProps) {
|
|
const t = useTranslation("exchange");
|
|
return (
|
|
<div style={styles.stepIndicator}>
|
|
<div
|
|
style={{
|
|
...styles.step,
|
|
...(currentStep === "details" ? styles.stepActive : styles.stepCompleted),
|
|
}}
|
|
>
|
|
<span style={styles.stepNumber}>1</span>
|
|
<span style={styles.stepLabel}>{t("steps.details")}</span>
|
|
</div>
|
|
<div style={styles.stepDivider} />
|
|
<div
|
|
style={{
|
|
...styles.step,
|
|
...(currentStep === "booking"
|
|
? styles.stepActive
|
|
: currentStep === "confirmation"
|
|
? styles.stepCompleted
|
|
: {}),
|
|
}}
|
|
>
|
|
<span style={styles.stepNumber}>2</span>
|
|
<span style={styles.stepLabel}>{t("steps.booking")}</span>
|
|
</div>
|
|
<div style={styles.stepDivider} />
|
|
<div
|
|
style={{
|
|
...styles.step,
|
|
...(currentStep === "confirmation" ? styles.stepActive : {}),
|
|
}}
|
|
>
|
|
<span style={styles.stepNumber}>3</span>
|
|
<span style={styles.stepLabel}>{t("steps.confirm")}</span>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|