alexandrev-tibco
66 lines
2.8 KiB
TypeScript
66 lines
2.8 KiB
TypeScript
import type { Dictionary } from "@/lib/i18n";
|
|
|
|
type OnboardingModalProps = {
|
|
onClose: () => void;
|
|
onStart: () => void;
|
|
t: Dictionary;
|
|
};
|
|
|
|
export default function OnboardingModal({ onClose, onStart, t }: OnboardingModalProps) {
|
|
return (
|
|
<div className="fixed inset-0 z-50 flex items-end bg-black/70 p-3 backdrop-blur-sm sm:items-center sm:justify-center">
|
|
<div
|
|
className="w-full overflow-hidden rounded-lg border border-white/10 bg-pitch-950 shadow-2xl sm:max-w-md"
|
|
role="dialog"
|
|
aria-modal="true"
|
|
aria-labelledby="onboarding-title"
|
|
>
|
|
<div className="border-b border-white/10 p-4">
|
|
<p className="text-xs font-black uppercase text-emerald-300">{t.onboardingEyebrow}</p>
|
|
<h2 id="onboarding-title" className="mt-1 text-2xl font-black text-white">
|
|
{t.onboardingTitle}
|
|
</h2>
|
|
<p className="mt-2 text-sm leading-6 text-white/65">{t.onboardingLead}</p>
|
|
</div>
|
|
|
|
<div className="grid gap-2 p-4">
|
|
<div className="rounded-lg border border-white/10 bg-white/[0.06] p-3">
|
|
<p className="text-xs font-black uppercase text-white/45">{t.onboardingStepOneTitle}</p>
|
|
<p className="mt-1 text-sm font-semibold text-white">{t.onboardingStepOne}</p>
|
|
</div>
|
|
<div className="rounded-lg border border-white/10 bg-white/[0.06] p-3">
|
|
<p className="text-xs font-black uppercase text-white/45">{t.onboardingStepTwoTitle}</p>
|
|
<p className="mt-1 text-sm font-semibold text-white">{t.onboardingStepTwo}</p>
|
|
<div className="mt-3 flex gap-1">
|
|
<span className="h-5 w-5 rounded bg-emerald-400" title={t.exact} />
|
|
<span className="h-5 w-5 rounded bg-yellow-400" title={t.close} />
|
|
<span className="h-5 w-5 rounded bg-slate-500" title={t.miss} />
|
|
</div>
|
|
</div>
|
|
<div className="rounded-lg border border-white/10 bg-white/[0.06] p-3">
|
|
<p className="text-xs font-black uppercase text-white/45">{t.onboardingStepThreeTitle}</p>
|
|
<p className="mt-1 text-sm font-semibold text-white">{t.onboardingStepThree}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex gap-2 border-t border-white/10 p-4">
|
|
<button
|
|
type="button"
|
|
onClick={onStart}
|
|
className="h-11 flex-1 rounded-lg bg-emerald-400 px-4 text-sm font-black uppercase text-pitch-950 transition hover:bg-emerald-300"
|
|
>
|
|
{t.playToday}
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={onClose}
|
|
className="h-11 rounded-lg border border-white/15 px-4 text-sm font-black uppercase text-white transition hover:bg-white/10"
|
|
>
|
|
{t.close}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|