feat: add user profile to manage account

src/app/(auth)/dashboard/layout.tsx

@@ -0,0 +1,60 @@
+import Link from 'next/link';
+
+import { AppConfig } from '@/utils/AppConfig';
+
+export default function DashboardLayout({
+  children, // will be a page or nested layout
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="w-full px-1 text-gray-700 antialiased">
+      <div className="mx-auto max-w-screen-md">
+        <header className="border-b border-gray-300">
+          <div className="pb-8 pt-16">
+            <h1 className="text-3xl font-bold text-gray-900">
+              {AppConfig.title}
+            </h1>
+            <h2 className="text-xl">{AppConfig.description}</h2>
+          </div>
+
+          <div className="flex justify-between">
+            <nav>
+              <ul className="flex flex-wrap text-xl">
+                <li className="mr-6">
+                  <Link
+                    href="/dashboard/"
+                    className="border-none text-gray-700 hover:text-gray-900"
+                  >
+                    Dashboard
+                  </Link>
+                </li>
+                <li className="mr-6">
+                  <Link
+                    href="/dashboard/user-profile/"
+                    className="border-none text-gray-700 hover:text-gray-900"
+                  >
+                    Manage your account
+                  </Link>
+                </li>
+              </ul>
+            </nav>
+          </div>
+        </header>
+
+        <main>{children}</main>
+
+        <footer className="border-t border-gray-300 py-8 text-center text-sm">
+          © Copyright {new Date().getFullYear()} {AppConfig.title}. Made with{' '}
+          <a href="https://creativedesignsguru.com">CreativeDesignsGuru</a>.
+          {/*
+           * PLEASE READ THIS SECTION
+           * I'm an indie maker with limited resources and funds, I'll really appreciate if you could have a link to my website.
+           * The link doesn't need to appear on every pages, one link on one page is enough.
+           * For example, in the `About` page. Thank you for your support, it'll mean a lot to me.
+           */}
+        </footer>
+      </div>
+    </div>
+  );
+}

src/app/(auth)/dashboard/page.tsx

@@ -1,17 +1,15 @@
 import type { Metadata } from 'next';
 
-import { Main } from '@/templates/Main';
-
 export const metadata: Metadata = {
   title: 'Dashboard',
   description: 'User dashboard',
 };
 
 const Dashboard = async () => {
   return (
-    <Main>
+    <div className="content">
       <p>Hello</p>
-    </Main>
+    </div>
   );
 };
 

src/app/(auth)/dashboard/user-profile/[[...user-profile]]/page.tsx

@@ -2,13 +2,13 @@ import { UserProfile } from '@clerk/nextjs';
 import type { Metadata } from 'next';
 
 export const metadata: Metadata = {
-  title: 'Sign up',
+  title: 'User profile',
   description:
     'Seamlessly sign in to your account with our user-friendly login process.',
 };
 
 const UserProfilePage = () => (
-  <div className="flex min-h-screen items-center justify-center">
+  <div className="my-6 -ml-16">
     <UserProfile />
   </div>
 );