82 lines
2.6 KiB
TypeScript
82 lines
2.6 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { PillIcon, PlusIcon, CheckCircleIcon } from '../icons/Icons';
|
|
|
|
interface OnboardingModalProps {
|
|
isOpen: boolean;
|
|
onComplete: () => void;
|
|
}
|
|
|
|
const onboardingSteps = [
|
|
{
|
|
icon: PillIcon,
|
|
title: 'Welcome to Medication Reminder!',
|
|
description:
|
|
'This quick tour will show you how to get the most out of the app.',
|
|
},
|
|
{
|
|
icon: PlusIcon,
|
|
title: 'Add Your Medications',
|
|
description:
|
|
"Start by clicking the 'Add Medication' button. You can set the name, dosage, frequency, and a custom icon.",
|
|
},
|
|
{
|
|
icon: CheckCircleIcon,
|
|
title: 'Track Your Doses',
|
|
description:
|
|
"Your daily schedule will appear on the main screen. Simply tap 'Take' to record a dose and stay on track with your health.",
|
|
},
|
|
];
|
|
|
|
const OnboardingModal: React.FC<OnboardingModalProps> = ({
|
|
isOpen,
|
|
onComplete,
|
|
}) => {
|
|
const [step, setStep] = useState(0);
|
|
const currentStep = onboardingSteps[step];
|
|
const isLastStep = step === onboardingSteps.length - 1;
|
|
|
|
const handleNext = () => {
|
|
if (isLastStep) {
|
|
onComplete();
|
|
} else {
|
|
setStep(s => s + 1);
|
|
}
|
|
};
|
|
|
|
if (!isOpen) return null;
|
|
|
|
return (
|
|
<div className='fixed inset-0 bg-black bg-opacity-60 dark:bg-opacity-80 z-50 flex justify-center items-center p-4'>
|
|
<div className='bg-white dark:bg-slate-800 rounded-lg shadow-xl w-full max-w-sm text-center p-8 m-4'>
|
|
<div className='mx-auto bg-indigo-100 dark:bg-indigo-900/50 rounded-full h-16 w-16 flex items-center justify-center mb-6'>
|
|
<currentStep.icon className='w-8 h-8 text-indigo-600 dark:text-indigo-400' />
|
|
</div>
|
|
<h2 className='text-2xl font-bold text-slate-800 dark:text-slate-100 mb-2'>
|
|
{currentStep.title}
|
|
</h2>
|
|
<p className='text-slate-600 dark:text-slate-300 mb-8'>
|
|
{currentStep.description}
|
|
</p>
|
|
|
|
<div className='flex justify-center items-center mb-8 space-x-2'>
|
|
{onboardingSteps.map((_, index) => (
|
|
<div
|
|
key={index}
|
|
className={`w-2.5 h-2.5 rounded-full transition-colors ${step === index ? 'bg-indigo-600' : 'bg-slate-300 dark:bg-slate-600'}`}
|
|
/>
|
|
))}
|
|
</div>
|
|
|
|
<button
|
|
onClick={handleNext}
|
|
className='w-full px-4 py-3 text-lg font-semibold text-white bg-indigo-600 rounded-lg hover:bg-indigo-700 transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-slate-800'
|
|
>
|
|
{isLastStep ? 'Get Started' : 'Next'}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default OnboardingModal;
|