39 lines
1.6 KiB
JavaScript
39 lines
1.6 KiB
JavaScript
|
import { ShieldCheck } from "lucide-react";
|
||
|
|
import Link from "next/link";
|
||
|
|
import { useTranslation } from "react-i18next";
|
||
|
|
export default function ShowLoginDialog({setShowLoginDialog}) {
|
||
|
|
const {t}=useTranslation()
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 px-4 py-8">
|
||
|
|
<div className="w-full max-w-md rounded-3xl bg-white p-6 shadow-2xl border border-gray-200">
|
||
|
|
<div className="flex items-center gap-3 mb-5">
|
||
|
|
<ShieldCheck className="w-7 h-7 text-amber-500" />
|
||
|
|
<div>
|
||
|
|
<h3 className="text-lg font-semibold text-gray-900">{t("loginRequired")}</h3>
|
||
|
|
<p className="text-sm text-gray-600">{t("loginRequiredDesc")}</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className="space-y-4">
|
||
|
|
<div className="rounded-2xl bg-gray-50 p-4">
|
||
|
|
<p className="text-sm text-gray-700">{t("loginPrompt")}</p>
|
||
|
|
</div>
|
||
|
|
<div className="flex flex-col gap-3 sm:flex-row sm:justify-end">
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
onClick={() => setShowLoginDialog(false)}
|
||
|
|
className="w-full sm:w-auto px-5 py-3 rounded-xl border border-gray-300 text-gray-700 hover:bg-gray-100 transition-colors"
|
||
|
|
>
|
||
|
|
{t("close")}
|
||
|
|
</button>
|
||
|
|
<Link href="/login" className="w-full sm:w-auto px-5 py-3 rounded-xl bg-amber-500 text-white font-semibold text-center hover:bg-amber-600 transition-colors">
|
||
|
|
{t("login")}
|
||
|
|
</Link>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</>
|
||
|
|
);
|
||
|
|
}
|