36 lines
1.5 KiB
TypeScript
36 lines
1.5 KiB
TypeScript
'use client';
|
|
|
|
import React, { useEffect } from 'react';
|
|
import { AlertTriangle, RefreshCw } from 'lucide-react';
|
|
|
|
interface ErrorProps {
|
|
error: Error & { digest?: string };
|
|
reset: () => void;
|
|
}
|
|
|
|
export default function Error({ error, reset }: ErrorProps) {
|
|
useEffect(() => {
|
|
console.error('Storefront error boundary caught:', error);
|
|
}, [error]);
|
|
|
|
return (
|
|
<div className="w-full min-h-screen bg-[#F8F9FB] flex flex-col items-center justify-center p-6 font-sans">
|
|
<div className="max-w-md w-full bg-white border border-gray-250 rounded-2xl p-8 text-center shadow-soft">
|
|
<div className="w-12 h-12 bg-red-50 text-red-500 rounded-full flex items-center justify-center mx-auto mb-4">
|
|
<AlertTriangle size={24} className="stroke-[2.5]" />
|
|
</div>
|
|
<h2 className="text-lg font-extrabold text-gray-900 mb-2 font-outfit">Something Went Wrong</h2>
|
|
<p className="text-xs text-gray-500 font-medium mb-6">
|
|
{error.message || 'We ran into an unexpected error loading this page. Please try refreshing.'}
|
|
</p>
|
|
<button
|
|
onClick={() => reset()}
|
|
className="inline-flex items-center justify-center gap-2 bg-[#0073EC] hover:bg-[#1565C0] text-white font-bold text-xs uppercase tracking-wider py-3.5 px-6 rounded-xl transition-all shadow-md active:scale-[0.99] cursor-pointer"
|
|
>
|
|
<RefreshCw size={14} className="animate-spin-slow" />
|
|
<span>Try Again</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|