Add mock user delete page

Author: MrBartusek

apps/client/src/components/Pages/User/UserDeleteTab.tsx

@@ -0,0 +1,8 @@
+function UserDeleteTab() {
+	return (
+		<div className="mt-8">
+			<h2 className="mb-4 text-3xl">Delete user account</h2>
+		</div>
+	);
+}
+export default UserDeleteTab;

apps/client/src/components/Pages/User/UserDetailsTab.tsx

@@ -1,21 +1,21 @@
+import { BsPencil } from 'react-icons/bs';
 import { Link } from 'react-router-dom';
 import IconButton from '../../IconButton';
-import { BsPencil } from 'react-icons/bs';
 import UserProfileCard from '../../UserProfileCard';
+import UserDangerZone from '../../User/UserDangerZone';
 
 function UserDetailsTab() {
 	return (
 		<div className="mt-8">
 			<h2 className="mb-6 text-3xl">My account</h2>
 			<UserProfileCard />
-			<div className="py-6">
-				<Link
-					to="update"
-					className="inline-block"
-				>
-					<IconButton icon={BsPencil}>Edit profile</IconButton>
-				</Link>
-			</div>
+			<Link
+				to="update"
+				className="mt-2 inline-block"
+			>
+				<IconButton icon={BsPencil}>Edit profile</IconButton>
+			</Link>
+			<UserDangerZone />
 		</div>
 	);
 }

apps/client/src/components/Router.tsx

@@ -48,6 +48,7 @@ import PasswordResetPage from './Pages/PasswordResetPage';
 import UserUpdateTab from './Pages/User/UserUpdateTab';
 import UserConfirmEmailTab from './Pages/User/UserConfirmEmailTab';
 import UserEmailChangeTab from './Pages/User/UserEmailChangeTab';
+import UserDeleteTab from './Pages/User/UserDeleteTab';
 
 function Router() {
 	const router = createBrowserRouter([
@@ -127,13 +128,17 @@ function Router() {
 									path: '',
 									element: <UserDetailsTab />,
 								},
+								{
+									path: 'security',
+									element: <UserSecurityTab />,
+								},
 								{
 									path: 'update',
 									element: <UserUpdateTab />,
 								},
 								{
-									path: 'security',
-									element: <UserSecurityTab />,
+									path: 'delete',
+									element: <UserDeleteTab />,
 								},
 								{
 									path: 'confirm-email',

apps/client/src/components/User/UserDangerZone.tsx

@@ -0,0 +1,23 @@
+import { BsPersonXFill } from 'react-icons/bs';
+import { Link } from 'react-router-dom';
+import IconButton from '../IconButton';
+
+function UserDangerZone() {
+	return (
+		<div className="mt-8">
+			<h2 className="mb-4 text-2xl">Danger Zone</h2>
+			<p className="text-muted">Potentially destructive actions, be cautious!</p>
+			<div className="mt-6 inline-flex flex-col gap-6">
+				<Link to="delete">
+					<IconButton
+						variant="danger"
+						icon={BsPersonXFill}
+					>
+						Delete account
+					</IconButton>
+				</Link>
+			</div>
+		</div>
+	);
+}
+export default UserDangerZone;