feat: not found handle page

src/App.tsx

@@ -8,6 +8,7 @@ import { BrowserRouter, Route, Routes, useLocation } from "react-router";
 
 import "./App.scss";
 import kuma from "./assets/kuma.png";
+import NotFound from "./components/notfound";
 
 function App() {
 	return (
@@ -41,17 +42,7 @@ function Dashboard() {
 	return (
 		<main className="container-md ka-view">
 			<Header />
-			{typeof path.data !== "undefined" ? path.data.is_dir ? <Directory /> : <FileView /> : (
-				<>
-					<h1>404 Not Found</h1>
-
-					<button className="primary" onClick={ev => {
-						ev.preventDefault();
-						document.location.href = "/";
-					}}>Back to home</button>
-				</>
-			)}
-			
+			{typeof path.data !== "undefined" ? path.data.is_dir ? <Directory /> : <FileView /> : <NotFound />}
 			<Footer />
 		</main>
 	);

src/components/notfound/index.tsx

@@ -0,0 +1,18 @@
+import { DynamicIcon } from "lucide-react/dynamic";
+import "./notfound.scss";
+
+function NotFound() {
+	return (
+		<div className="not-found">
+			<DynamicIcon className="icon" name="file-question" size={120} />
+			<h1>404 Not Found</h1>
+
+			<button className="primary" onClick={ev => {
+				ev.preventDefault();
+				document.location.href = "/";
+			}}>Back to home</button>
+		</div>
+	);
+}
+
+export default NotFound;

src/components/notfound/notfound.scss

@@ -0,0 +1,14 @@
+.not-found {
+	display: flex;
+	align-items: center;
+	flex-direction: column;
+	justify-content: center;
+
+	.icon {
+		margin: 3rem 0;
+	}
+
+	.primary {
+		margin: 0.5rem 0;
+	}
+}