73 lines
2.6 KiB
TypeScript
73 lines
2.6 KiB
TypeScript
"use client";
|
||
import * as React from 'react';
|
||
import { ErrorInfo, ReactNode } from 'react';
|
||
import { AlertTriangle, RefreshCcw } from 'lucide-react';
|
||
|
||
interface Props {
|
||
children: ReactNode;
|
||
}
|
||
|
||
interface State {
|
||
hasError: boolean;
|
||
error: Error | null;
|
||
}
|
||
|
||
export class ErrorBoundary extends React.Component<Props, State> {
|
||
public state: State;
|
||
|
||
constructor(props: Props) {
|
||
super(props);
|
||
this.state = {
|
||
hasError: false,
|
||
error: null
|
||
};
|
||
}
|
||
|
||
public static getDerivedStateFromError(error: Error): State {
|
||
return { hasError: true, error };
|
||
}
|
||
|
||
public override componentDidCatch(error: Error, errorInfo: ErrorInfo) {
|
||
console.error('Uncaught error:', error, errorInfo);
|
||
}
|
||
|
||
private handleRetry = () => {
|
||
this.setState({ hasError: false, error: null });
|
||
window.location.reload();
|
||
};
|
||
|
||
public override render(): ReactNode {
|
||
if (this.state.hasError) {
|
||
return (
|
||
<div className="min-h-screen bg-medical-gray-50 flex items-center justify-center p-6" dir="rtl">
|
||
<div className="max-w-md w-full bg-white rounded-[3rem] p-12 shadow-2xl text-center border border-medical-gray-100">
|
||
<div className="w-24 h-24 bg-rose-50 rounded-[2.5rem] flex items-center justify-center mx-auto mb-8">
|
||
<AlertTriangle className="w-12 h-12 text-rose-500" />
|
||
</div>
|
||
|
||
<h1 className="text-3xl font-black text-medical-gray-900 mb-4">متأسفانه خطایی رخ داده است</h1>
|
||
<p className="text-medical-gray-500 mb-10 font-medium leading-relaxed">
|
||
مشکلی در بارگذاری این بخش پیش آمده است. لطفاً برای ادامه دوباره تلاش کنید.
|
||
</p>
|
||
|
||
<button
|
||
onClick={this.handleRetry}
|
||
className="w-full bg-canina-blue text-white py-5 rounded-2xl font-black flex items-center justify-center gap-3 hover:scale-105 transition-all shadow-xl shadow-canina-blue/20"
|
||
>
|
||
<RefreshCcw className="w-5 h-5" />
|
||
تلاش مجدد
|
||
</button>
|
||
|
||
<div className="mt-8 pt-8 border-t border-medical-gray-50 flex items-center justify-center gap-2">
|
||
<div className="w-8 h-8 bg-canina-blue rounded-xl flex items-center justify-center text-white font-bold text-xs italic">C</div>
|
||
<span className="text-[10px] font-black text-medical-gray-300 uppercase tracking-widest">Canina Pharma Support</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
return this.props.children;
|
||
}
|
||
}
|