87 lines
3.3 KiB
TypeScript
87 lines
3.3 KiB
TypeScript
'use client';
|
||
|
||
import { Home, ShieldX, ArrowRight } from 'lucide-react';
|
||
import { useRouter } from "next/navigation";
|
||
import { useState } from 'react';
|
||
import AuthModal from '@/components/Auth';
|
||
|
||
|
||
|
||
// تعریف تایپ برای پراپها (ورودیهای کامپوننت)
|
||
interface NotLoginProps {
|
||
buttonText?: string;
|
||
returnPath?: string;
|
||
onClose?: () => void;
|
||
}
|
||
|
||
export default function NotLogin({
|
||
buttonText = "بازگشت به صفحه اصلی", // مقدار پیشفرض
|
||
returnPath = "/", // مقدار پیشفرض
|
||
onClose
|
||
}: NotLoginProps) {
|
||
const router = useRouter();
|
||
const [isAuthModalOpen, setIsAuthModalOpen] = useState(false);
|
||
const [user, setUser] = useState<{ username: string; displayName: string } | null>(null);
|
||
const [showRegisterSuccessDialog, setShowRegisterSuccessDialog] = useState(false);
|
||
|
||
// مدیریت عملیات کلیک روی دکمه
|
||
const handleAction = () => {
|
||
if (onClose) {
|
||
// اگر در حالت مودال (مثلا سبد خرید) استفاده شده بود، فقط مودال بسته شود
|
||
onClose();
|
||
} else {
|
||
// اگر به عنوان صفحه جایگزین (مثلا چکاوت) استفاده شد، به مسیر پاس داده شده برود
|
||
router.push(returnPath);
|
||
}
|
||
};
|
||
|
||
// تغییر آیکون بر اساس مسیر هدایت (اختیاری برای زیبایی بیشتر)
|
||
const renderIcon = () => {
|
||
if (returnPath === "/") return <Home className="w-4 h-4" />;
|
||
return <ArrowRight className="w-4 h-4" />;
|
||
};
|
||
|
||
return (
|
||
<div className="min-h-screen flex items-center justify-center bg-gray-50 px-4" dir="rtl">
|
||
<div className="bg-white shadow-xl rounded-2xl p-10 max-w-md w-full text-center border border-gray-100">
|
||
<div className="flex justify-center mb-6">
|
||
<div className="bg-red-100 p-4 rounded-full">
|
||
<ShieldX className="w-10 h-10 text-red-600" />
|
||
</div>
|
||
</div>
|
||
<h1 className="text-2xl font-bold text-gray-800 mb-2">دسترسی غیرمجاز</h1>
|
||
<p className="text-gray-500 text-sm leading-relaxed mb-6">برای ادامه مراحل باید ابتدا وارد حساب کاربری خود شوید.</p>
|
||
|
||
<button
|
||
onClick={handleAction}
|
||
className="flex mx-auto cursor-pointer items-center gap-2 bg-gray-900 text-white px-5 py-2.5 rounded-lg text-sm hover:bg-black transition"
|
||
>
|
||
{renderIcon()}
|
||
{buttonText}
|
||
</button>
|
||
|
||
|
||
|
||
|
||
|
||
<button onClick={() => setIsAuthModalOpen(true)}>
|
||
ورود / ثبتنام
|
||
</button>
|
||
{/* فراخوانی مودال احراز هویت */}
|
||
<AuthModal
|
||
isOpen={isAuthModalOpen}
|
||
onClose={() => setIsAuthModalOpen(false)}
|
||
onLoginSuccess={(userData) => setUser(userData)}
|
||
onRegisterSuccess={(userData) => {
|
||
setUser(userData);
|
||
setShowRegisterSuccessDialog(true);
|
||
}}
|
||
/>
|
||
|
||
|
||
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|