feat(exd-23): implemented no access page (#16)

src/components/NoAccessPage.tsx

@@ -0,0 +1,29 @@
+import { Link } from 'react-router-dom';
+import { Button } from '@/components/ui/button';
+import ExcaliErrorImage from '@/assets/images/excali_error.png';
+import { useTranslation } from 'react-i18next';
+
+export const NoAccessPage = () => {
+	const { t } = useTranslation();
+	return (
+		<div className="flex h-screen items-center justify-center">
+			<div className="flex flex-col items-center gap-4">
+				<img
+					className="w-[40%]"
+					src={ExcaliErrorImage}
+					alt="excali-error-image"
+				/>
+				<h1 className="text-2xl font-bold tracking-tight text-gray-900 dark:text-white sm:text-4xl">
+					{t('components.noAccessPage.title')}
+				</h1>
+				<div className="text-gray-500 dark:text-gray-200">
+					{t('components.noAccessPage.description')}
+				</div>
+
+				<Link to={'/'}>
+					<Button>{t('components.noAccessPage.backButton')}</Button>
+				</Link>
+			</div>
+		</div>
+	);
+};

src/i18n/en.json

@@ -146,6 +146,11 @@
 			"myAccount": "My Account",
 			"settings": "Settings",
 			"logout": "Logout"
+		},
+		"noAccessPage": {
+			"title": "Access Denied",
+			"description": "You can't go further.",
+			"backButton": "Go Back Home"
 		}
 	},
 	"validation": {

src/router.tsx

@@ -5,6 +5,7 @@ import Editor from './components/Editor';
 import UserDashboard from './components/UserDashboard';
 import ProtectedRoute from './components/ProtectedRoute';
 import TagsManager from '@/components/TagsManager';
+import { NoAccessPage } from '@/components/NoAccessPage';
 
 export const router = createBrowserRouter([
 	{
@@ -31,6 +32,10 @@ export const router = createBrowserRouter([
 				path: '/error-test',
 				element: <ErrorPage />,
 			},
+			{
+				path: '/no-access',
+				element: <NoAccessPage />,
+			},
 			{
 				path: '/',
 				element: <Homepage />,