53 lines
2.0 KiB
TypeScript
53 lines
2.0 KiB
TypeScript
'use client';
|
||
|
||
import { useSearchParams } from 'next/navigation';
|
||
import { XCircle, ArrowLeft, RotateCcw } from 'lucide-react';
|
||
import Link from 'next/link';
|
||
import { Suspense } from 'react';
|
||
|
||
function ErrorContent() {
|
||
const searchParams = useSearchParams();
|
||
const callbackUrl = searchParams.get('callback_url') || '/';
|
||
|
||
return (
|
||
<div className="max-w-md mx-auto mt-20 p-8 text-center bg-white rounded-3xl shadow-xl border border-red-50">
|
||
<div className="flex justify-center mb-6">
|
||
<div className="bg-red-100 p-4 rounded-full">
|
||
<XCircle className="w-16 h-16 text-red-600" />
|
||
</div>
|
||
</div>
|
||
<h1 className="text-2xl font-bold text-gray-900 mb-2">Ödeme Başarısız</h1>
|
||
<p className="text-gray-600 mb-8">
|
||
İşleminiz maalesef tamamlanamadı. Kart bilgilerinizi kontrol edip tekrar deneyebilirsiniz.
|
||
</p>
|
||
|
||
<div className="flex flex-col gap-3">
|
||
<Link
|
||
href="/checkout"
|
||
className="flex items-center justify-center gap-2 w-full py-4 bg-gray-900 text-white rounded-2xl font-bold hover:bg-gray-800 transition"
|
||
>
|
||
<RotateCcw size={18} />
|
||
Tekrar Dene
|
||
</Link>
|
||
<Link
|
||
href={callbackUrl}
|
||
className="flex items-center justify-center gap-2 w-full py-4 bg-white text-gray-600 border border-gray-100 rounded-2xl font-bold hover:bg-gray-50 transition"
|
||
>
|
||
<ArrowLeft size={18} />
|
||
Mağazaya Dön
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
export default function CheckoutErrorPage() {
|
||
return (
|
||
<div className="min-h-screen bg-[#F8FAFC] flex items-center justify-center p-4">
|
||
<Suspense fallback={<div>Yükleniyor...</div>}>
|
||
<ErrorContent />
|
||
</Suspense>
|
||
</div>
|
||
);
|
||
}
|