76 lines
1.8 KiB
TypeScript
76 lines
1.8 KiB
TypeScript
import React, { ReactNode } from 'react';
|
|
import ProgressDots from './ProgressDots';
|
|
import styles from './OnboardingLayout.module.css';
|
|
|
|
interface OnboardingLayoutProps {
|
|
title: string;
|
|
image?: string;
|
|
description?: string;
|
|
currentStep: number;
|
|
totalSteps: number;
|
|
children?: ReactNode;
|
|
primaryButtonText: string;
|
|
secondaryButtonText?: string;
|
|
onPrimaryClick: () => void;
|
|
onSecondaryClick?: () => void;
|
|
}
|
|
|
|
const OnboardingLayout: React.FC<OnboardingLayoutProps> = ({
|
|
title,
|
|
image,
|
|
description,
|
|
currentStep,
|
|
totalSteps,
|
|
children,
|
|
primaryButtonText,
|
|
secondaryButtonText,
|
|
onPrimaryClick,
|
|
onSecondaryClick
|
|
}) => {
|
|
return (
|
|
<div className={styles.container}>
|
|
<div className={styles.content}>
|
|
<h1 className={styles.title}>{title}</h1>
|
|
|
|
{image && (
|
|
<div className={styles.imageContainer}>
|
|
<img src={image} alt="" className={styles.image} />
|
|
</div>
|
|
)}
|
|
|
|
{description && (
|
|
<p className={styles.description}>{description}</p>
|
|
)}
|
|
|
|
{children && (
|
|
<div className={styles.childrenContainer}>
|
|
{children}
|
|
</div>
|
|
)}
|
|
|
|
<ProgressDots currentStep={currentStep} totalSteps={totalSteps} />
|
|
|
|
<div className={styles.buttonsContainer}>
|
|
<button
|
|
className={styles.primaryButton}
|
|
onClick={onPrimaryClick}
|
|
>
|
|
{primaryButtonText}
|
|
</button>
|
|
|
|
{secondaryButtonText && onSecondaryClick && (
|
|
<button
|
|
className={styles.secondaryButton}
|
|
onClick={onSecondaryClick}
|
|
>
|
|
{secondaryButtonText}
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default OnboardingLayout;
|