chore(docs): Adding docs for routers

docs/src/app/docs/docs.layout.tsx

@@ -1,7 +1,8 @@
 import Navbar from '@/components/layout/navbar';
-import { Outlet, LayoutComponent } from 'rasengan';
+import { Outlet, LayoutComponent, useNavigation, useLocation } from 'rasengan';
 import SidebarNavigation from './components/layout/sidebar';
 import Footer from '@/components/layout/footer';
+import React from 'react';
 
 const DocsLayout: LayoutComponent = () => {
   return (

docs/src/app/docs/pages/home/core-concepts/routing/base-concepts.page.mdx

@@ -6,7 +6,157 @@ metadata:
 toc: true
 ---
 
+import Tabs from '@/components/molecules/tab';
+import Pagination from '@/components/molecules/pagination';
+
 <span className="text-[12px] font-mono-regular text-foreground/60">
   CORE CONCEPTS
 </span>
-# Base Concepts
+# Rasengan.js Routing Basics
+
+Rasengan.js supports **multi-page application (MPA) routing** by default, powered by <a href="https://reactrouter.com/" target="_blank" rel="noopener noreferrer">`React Router`</a>. This allows you to handle different URLs and render specific components based on the URL, making navigation seamless within your application.
+
+## Understanding Routing in Rasengan.js
+Routing in Rasengan.js is managed through **Routers, Layouts, and Pages**:
+
+- **Router**: A collection of pages, optionally grouped under a shared layout.
+- **Layout**: A wrapper component for pages, providing a common structure.
+- **Page**: A React component displayed when a specific URL is accessed.
+
+## Setting Up Routing
+To configure routing in Rasengan.js, you need to define a **Router**, which organizes pages and layouts efficiently.
+
+### 1. Creating a Router
+A **Router** is a collection of pages that can share a layout. You create one by extending `RouterComponent` and configuring it using `defineRouter`.
+
+#### Example: Defining a Router
+
+```javascript title="src/app/app.router.ts" showLineNumbers
+import { RouterComponent, defineRouter } from "rasengan";
+
+class AppRouter extends RouterComponent {}
+
+export default defineRouter({
+  imports: [], // Import other routers
+  layout: null, // Assign a layout (optional)
+  pages: [] // Add page components
+})(AppRouter);
+```
+
+#### Router Configuration Options
+| Property   | Description                 | Type                | Required |
+|------------|-----------------------------|---------------------|----------|
+| `imports`   | Import additional routers   | `RouterComponent[]` | No       |
+| `layout`   | Assign a layout component  | `LayoutComponent`   | No       |
+| `pages`    | Define page components      | `PageComponent[]`   | Yes      |
+
+### 2. Creating a Layout
+A **Layout** wraps around multiple pages, providing a consistent structure (e.g., headers, footers). It is optional but recommended.
+
+#### Example: Defining a Layout
+<Tabs 
+  tabs={[
+    {
+      title: "TypeScript",
+    },
+    {
+      title: "JavaScript",
+    },
+  ]} 
+  activeIndex={0}
+>
+  <Tabs.Item>
+    ```tsx filename="src/app/app.layout.tsx" showLineNumbers copy
+    import React from "react";
+    import { LayoutComponent, Outlet } from "rasengan";
+
+    const AppLayout: LayoutComponent = () => {
+      return (
+        <>
+          <Outlet />
+        </>
+      );
+    };
+
+    AppLayout.path = "/";
+    export default AppLayout;
+    ```
+  </Tabs.Item>
+  <Tabs.Item>
+    ```jsx filename="src/app/app.layout.jsx" showLineNumbers copy
+    import React from "react";
+    import { Outlet } from "rasengan";
+
+    const AppLayout = () => {
+      return (
+        <>
+          <Outlet />
+        </>
+      );
+    };
+
+    AppLayout.path = "/";
+    export default AppLayout;
+    ```
+  </Tabs.Item>
+</Tabs>
+
+### 3. Creating a Page
+A **Page** is a React component that is displayed when a user visits a specific route.
+
+#### Example: Defining a Page
+<Tabs 
+  tabs={[
+    {
+      title: "TypeScript",
+    },
+    {
+      title: "JavaScript",
+    },
+  ]} 
+  activeIndex={0}
+>
+  <Tabs.Item>
+    ```tsx filename="src/app/home.page.tsx" showLineNumbers copy
+    import { PageComponent } from "rasengan";
+
+    const Home: PageComponent = () => {
+      return <div>Home Page</div>;
+    };
+
+    Home.path = "/";
+    Home.metadata = {
+      title: "Home",
+      description: "Home Page"
+    };
+
+    export default Home;
+    ```
+  </Tabs.Item>
+  <Tabs.Item>
+    ```jsx filename="src/app/home.page.jsx" showLineNumbers copy
+    const Home = () => {
+      return <div>Home Page</div>;
+    };
+
+    Home.path = "/";
+    Home.metadata = {
+      title: "Home",
+      description: "Home Page"
+    };
+
+    export default Home;
+    ```
+  </Tabs.Item>
+</Tabs>
+
+<Pagination 
+  prev={{
+    href: '/docs/getting-started/project-structure',
+    label: 'Project Structure',
+  }}
+  next={{
+    href: '/docs/routing/router-configuration',
+    label: 'Router Configuration',
+  }}
+/>