Add layout components for authentication and main application structure

- Implement AuthLayout for authentication-related pages
- Create Header and Footer components for consistent layout
- Establish MainLayout to wrap Header, Footer, and Outlet
- Define authRoutes and mainRoutes for routing structure

Author: typescript-any

src/components/layout/auth-layout.tsx

@@ -0,0 +1,19 @@
+import { Outlet } from "react-router";
+
+// This layout is used for authentication-related pages like login and register
+const AuthLayout = () => {
+  return (
+    <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+      <section className="flex flex-col items-center justify-center ">
+        <h1>Auth Layout</h1>
+        <p>
+          Modify this layout to include your authentication-related components
+          You can also add a logo or any other branding elements here.
+        </p>
+      </section>
+      <Outlet />
+    </div>
+  );
+};
+
+export default AuthLayout;

src/components/layout/footer.tsx

@@ -0,0 +1,91 @@
+const Footer = () => {
+  const currentYear = new Date().getFullYear();
+
+  return (
+    <footer className="bg-gray-50 border-t">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+        <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
+          <div className="col-span-1 md:col-span-2">
+            <h3 className="text-lg font-semibold text-gray-900 mb-4">
+              App Name
+            </h3>
+            <p className="text-gray-600 text-sm">
+              A modern React application built with TypeScript, React Router,
+              and Tailwind CSS.
+            </p>
+          </div>
+
+          <div>
+            <h4 className="text-md font-medium text-gray-900 mb-3">
+              Quick Links
+            </h4>
+            <ul className="space-y-2">
+              <li>
+                <a
+                  href="/"
+                  className="text-gray-600 hover:text-gray-900 text-sm"
+                >
+                  Home
+                </a>
+              </li>
+              <li>
+                <a
+                  href="/create-post"
+                  className="text-gray-600 hover:text-gray-900 text-sm"
+                >
+                  Create Post
+                </a>
+              </li>
+              <li>
+                <a
+                  href="/admin"
+                  className="text-gray-600 hover:text-gray-900 text-sm"
+                >
+                  Admin
+                </a>
+              </li>
+            </ul>
+          </div>
+
+          <div>
+            <h4 className="text-md font-medium text-gray-900 mb-3">Support</h4>
+            <ul className="space-y-2">
+              <li>
+                <a
+                  href="#"
+                  className="text-gray-600 hover:text-gray-900 text-sm"
+                >
+                  Documentation
+                </a>
+              </li>
+              <li>
+                <a
+                  href="#"
+                  className="text-gray-600 hover:text-gray-900 text-sm"
+                >
+                  Contact Us
+                </a>
+              </li>
+              <li>
+                <a
+                  href="#"
+                  className="text-gray-600 hover:text-gray-900 text-sm"
+                >
+                  Privacy Policy
+                </a>
+              </li>
+            </ul>
+          </div>
+        </div>
+
+        <div className="mt-8 pt-8 border-t border-gray-200">
+          <p className="text-center text-gray-500 text-sm">
+            © {currentYear} App Name. All rights reserved.
+          </p>
+        </div>
+      </div>
+    </footer>
+  );
+};
+
+export default Footer;

src/components/layout/header.tsx

@@ -0,0 +1,49 @@
+import { Link } from "react-router";
+
+const Header = () => {
+  return (
+    <header className="bg-white shadow-sm border-b">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="flex justify-between items-center h-16">
+          <div className="flex items-center">
+            <Link to="/" className="text-xl font-bold text-gray-900">
+              App Name
+            </Link>
+          </div>
+
+          <nav className="hidden md:flex space-x-8">
+            <Link
+              to="/"
+              className="text-gray-500 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium"
+            >
+              Home
+            </Link>
+            <Link
+              to="/create-post"
+              className="text-gray-500 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium"
+            >
+              Create Post
+            </Link>
+            <Link
+              to="/admin"
+              className="text-gray-500 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium"
+            >
+              Admin
+            </Link>
+          </nav>
+
+          <div className="flex items-center space-x-4">
+            <Link
+              to="/login"
+              className="text-gray-500 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium"
+            >
+              Login
+            </Link>
+          </div>
+        </div>
+      </div>
+    </header>
+  );
+};
+
+export default Header;

src/components/layout/main-layout.tsx

@@ -0,0 +1,17 @@
+import { Outlet } from "react-router";
+import Header from "./header";
+import Footer from "./footer";
+
+const MainLayout = () => {
+  return (
+    <div className="min-h-screen flex flex-col">
+      <Header />
+      <main className="flex-1">
+        <Outlet />
+      </main>
+      <Footer />
+    </div>
+  );
+};
+
+export default MainLayout;

src/layout.tsx

@@ -4,11 +4,7 @@ import { Outlet } from "react-router";
 const Layout = () => {
   return (
     <Providers>
-      <header>Header</header>
-      <main>
-        <Outlet />
-      </main>
-      <footer>Footer</footer>
+      <Outlet />
     </Providers>
   );
 };

src/routes/auth-routes.tsx

@@ -0,0 +1,19 @@
+import AuthLayout from "@/components/layout/auth-layout";
+import { ROUTE_CONSTANTS } from "@/lib/constants";
+import withGuards from "@/lib/utils/with-guards";
+import { LoginPage } from "@/pages/login";
+import type { RouteObject } from "react-router";
+
+const authRoutes: RouteObject = {
+  // For Layout Routes, the path is not required.
+  Component: AuthLayout,
+  children: [
+    {
+      path: ROUTE_CONSTANTS.LOGIN,
+      index: true,
+      Component: withGuards(LoginPage, { mode: "auth" }),
+    },
+  ],
+};
+
+export default authRoutes;

src/routes/index.tsx

@@ -1,50 +1,28 @@
 import { ROUTE_CONSTANTS } from "@/lib/constants";
 import Layout from "../layout";
 
-import { HomePage } from "../pages/home";
-import { LoginPage } from "../pages/login";
 import ErrorElement from "@/components/error-element";
 import NotFound from "@/components/not-found";
-import { AdminPage } from "@/pages/admin";
 import { ForbiddenPage } from "@/pages/forbidden";
-import { CreatePostPage } from "@/pages/create-post";
 import blogRoutes from "./blog-routes";
 import type { RouteObject } from "react-router";
-import withGuards from "@/lib/utils/with-guards";
+import authRoutes from "./auth-routes";
+
+import mainRoutes from "./main-routes";
 
 const routes: RouteObject[] = [
   {
     path: "/",
     Component: Layout,
     errorElement: <ErrorElement />,
     children: [
-      {
-        index: true,
-        Component: withGuards(HomePage, {
-          guard: { roles: ["admin", "user", "guest"] },
-        }),
-      },
-      {
-        path: ROUTE_CONSTANTS.ADMIN,
-        Component: withGuards(AdminPage, {
-          guard: { roles: ["admin"] },
-        }),
-      },
-      {
-        path: ROUTE_CONSTANTS.CREATE_POST,
-        Component: withGuards(CreatePostPage, {
-          guard: { roles: ["user", "admin"], scopes: ["write"] },
-        }),
-      },
+      authRoutes,
+      mainRoutes,
+      blogRoutes,
       {
         path: ROUTE_CONSTANTS.FORBIDDEN,
         Component: ForbiddenPage,
       },
-      {
-        path: ROUTE_CONSTANTS.LOGIN,
-        Component: withGuards(LoginPage, { mode: "auth" }),
-      },
-      blogRoutes,
     ],
   },
   {

src/routes/main-routes.tsx

@@ -0,0 +1,34 @@
+import MainLayout from "@/components/layout/main-layout";
+import { ROUTE_CONSTANTS } from "@/lib/constants";
+import withGuards from "@/lib/utils/with-guards";
+import { AdminPage } from "@/pages/admin";
+import { CreatePostPage } from "@/pages/create-post";
+import { HomePage } from "@/pages/home";
+import type { RouteObject } from "react-router";
+
+const mainRoutes: RouteObject = {
+  // For Layout Routes, the path is not required.
+  Component: MainLayout,
+  children: [
+    {
+      index: true, // This will be the default route when the path is "/"
+      Component: withGuards(HomePage, {
+        guard: { roles: ["admin", "user", "guest"] },
+      }),
+    },
+    {
+      path: ROUTE_CONSTANTS.ADMIN,
+      Component: withGuards(AdminPage, {
+        guard: { roles: ["admin"] },
+      }),
+    },
+    {
+      path: ROUTE_CONSTANTS.CREATE_POST,
+      Component: withGuards(CreatePostPage, {
+        guard: { roles: ["user", "admin"], scopes: ["write"] },
+      }),
+    },
+  ],
+};
+
+export default mainRoutes;