fix: error boundary app fallback alert.

src/components/ErrorBoundary/Fallback/AppFallback.tsx

@@ -1,7 +1,6 @@
 import type { FC } from 'react';
 
 import type { ErrorFallbackProps } from './ErrorFallbackProps';
-import { Alert } from '@mantine/core';
 import { useTranslation } from 'react-i18next';
 
 const handleReload = () => {
@@ -12,20 +11,20 @@ export const AppFallback: FC<ErrorFallbackProps> = ({ error }) => {
   const { t } = useTranslation('sys');
   return (
     <div className={`full-page justify-center items-center w-fit`}>
-      <Alert
-        icon={<p className={'text-2xl'}>🚨</p>}
-        title={<p className={`text-2xl`}>{t('warning')}</p>}
-        color="red"
-        radius="lg"
-        variant="filled"
-      >
-        <div className={`text-xl`}>
-          <p>{error.message}</p>
-          <p className="link" onClick={handleReload}>
-            {t('reload')}
-          </p>
+      <div className="prompt danger outline w-1/2 max-w-7xl">
+        <div className="content">
+          <div className="flex gap-2">
+            <p className={'text-2xl'}>🚨</p>
+            <p className={`text-2xl`}>{t('warning')}</p>
+          </div>
+          <div className={``}>
+            <p>{error.message}</p>
+            <p className="link inline-block" onClick={handleReload}>
+              {t('reload')}
+            </p>
+          </div>
         </div>
-      </Alert>
+      </div>
     </div>
   );
 };

src/components/ErrorBoundary/Fallback/index.ts

@@ -1,2 +1 @@
 export { AppFallback } from './AppFallback';
-export { LayoutFallback } from './LayoutFallback';

src/components/ErrorBoundary/index.tsx

@@ -1,7 +1,7 @@
 import type { FC, ReactNode } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
 
-import { LayoutFallback } from './Fallback';
+import { AppFallback, LayoutFallback } from './Fallback';
 import type { ErrorFallbackProps } from './Fallback/ErrorFallbackProps';
 
 type ErrorBoundaryProps = {
@@ -13,7 +13,7 @@ type ErrorBoundaryProps = {
 export const ReactErrorBoundary: FC<ErrorBoundaryProps> = ({ children, onReset, FallbackComponent }) => {
   return (
     /* eslint-disable react/jsx-handler-names */
-    <ErrorBoundary FallbackComponent={FallbackComponent || LayoutFallback} onReset={onReset}>
+    <ErrorBoundary FallbackComponent={FallbackComponent || AppFallback} onReset={onReset}>
       {children}
     </ErrorBoundary>
   );

src/components/lang.tsx

@@ -21,7 +21,9 @@ export const LangSelector: FC<Props> = ({ className = '' }) => {
       }}
     >
       {_.entries(SUPPORTED_LANGUAGE_LOCALIZED).map(([k, v]) => (
-        <option value={k}>{v}</option>
+        <option value={k} key={v}>
+          {v}
+        </option>
       ))}
     </select>
   );