feat: created example routes

Author: yeasin2002

src/pages/about.tsx

@@ -0,0 +1,16 @@
+import { Link } from "react-router";
+
+export default function About() {
+  return (
+    <div className="min-h-screen p-8">
+      <div className="mx-auto max-w-4xl">
+        <h1 className="mb-4 text-4xl font-bold">About Page</h1>
+        <p className="mb-6 text-gray-600">This is the about page demonstrating static routing.</p>
+        <p className="mb-4">Route: /about</p>
+        <Link to="/" className="text-blue-600 hover:underline">
+          ← Back to Home
+        </Link>
+      </div>
+    </div>
+  );
+}

src/pages/index.tsx

@@ -1,4 +1,5 @@
 import { Button } from "@/components";
+import { Link } from "react-router";
 
 interface Props extends React.ComponentProps<"div"> {}
 
@@ -10,18 +11,36 @@ const Home = ({ ...rest }: Props) => {
   };
   return (
     <div className="grid min-h-screen place-items-center bg-gray-900 text-white" {...rest}>
-      <div>
-        <span className="mx-3 text-2xl">Count: {count}</span>
-        <Button variant={"secondary"} onClick={handleIncrement}>
-          Increase
-        </Button>
+      <div className="space-y-8 text-center">
+        <div>
+          <span className="mx-3 text-2xl">Count: {count}</span>
+          <Button variant={"secondary"} onClick={handleIncrement}>
+            Increase
+          </Button>
+        </div>
+
+        <nav className="space-x-4">
+          <Link to="/about" className="text-blue-400 hover:underline">
+            About
+          </Link>
+          <Link to="/users" className="text-blue-400 hover:underline">
+            Users
+          </Link>
+          <Link to="/users/profile" className="text-blue-400 hover:underline">
+            Profile
+          </Link>
+          <Link to="/users/123" className="text-blue-400 hover:underline">
+            User #123
+          </Link>
+        </nav>
+
+        <p className="text-center text-xl">
+          React-TS Starter with Vite By Md Kawsar Islam Yeasin
+          <a href="https://github.com/yeasin2002" className="mx-2 underline" target="_blank">
+            (yeasin2002)
+          </a>
+        </p>
       </div>
-      <p className="text-center text-xl">
-        React-TS Starter with Vite By Md Kawsar Islam Yeasin
-        <a href="https://github.com/yeasin2002" className="mx-2 underline" target="_blank">
-          (yeasin2002)
-        </a>
-      </p>
     </div>
   );
 };

src/pages/users/[id].tsx

@@ -0,0 +1,32 @@
+import { Link, useParams } from "react-router";
+
+export default function UserDetail() {
+  const { id } = useParams<{ id: string }>();
+
+  return (
+    <div className="min-h-screen p-8">
+      <div className="mx-auto max-w-4xl">
+        <h1 className="mb-4 text-4xl font-bold">User Details</h1>
+        <p className="mb-6 text-gray-600">Route: /users/:id (dynamic route)</p>
+
+        <div className="mb-8 rounded border p-6">
+          <p className="mb-2 text-lg">
+            <span className="font-semibold">User ID:</span> {id}
+          </p>
+          <p className="text-gray-600">
+            This is a dynamic route that matches /users/1, /users/2, etc.
+          </p>
+        </div>
+
+        <div className="space-x-4">
+          <Link to="/users" className="text-blue-600 hover:underline">
+            ← Back to Users
+          </Link>
+          <Link to="/" className="text-blue-600 hover:underline">
+            Home
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+}

src/pages/users/index.tsx

@@ -0,0 +1,37 @@
+import { Link } from "react-router";
+
+const users = [
+  { id: 1, name: "Alice Johnson" },
+  { id: 2, name: "Bob Smith" },
+  { id: 3, name: "Charlie Brown" },
+];
+
+export default function Users() {
+  return (
+    <div className="min-h-screen p-8">
+      <div className="mx-auto max-w-4xl">
+        <h1 className="mb-4 text-4xl font-bold">Users List</h1>
+        <p className="mb-6 text-gray-600">Route: /users</p>
+
+        <div className="mb-8 space-y-4">
+          {users.map((user) => (
+            <div key={user.id} className="rounded border p-4 hover:bg-gray-50">
+              <Link to={`/users/${user.id}`} className="font-medium text-blue-600 hover:underline">
+                {user.name}
+              </Link>
+            </div>
+          ))}
+        </div>
+
+        <div className="space-x-4">
+          <Link to="/users/profile" className="text-blue-600 hover:underline">
+            View Profile
+          </Link>
+          <Link to="/" className="text-blue-600 hover:underline">
+            ← Back to Home
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+}

src/pages/users/profile.tsx

@@ -0,0 +1,34 @@
+import { Link } from "react-router";
+
+export default function UserProfile() {
+  return (
+    <div className="min-h-screen p-8">
+      <div className="mx-auto max-w-4xl">
+        <h1 className="mb-4 text-4xl font-bold">User Profile</h1>
+        <p className="mb-6 text-gray-600">Route: /users/profile</p>
+
+        <div className="mb-8 rounded border p-6">
+          <h2 className="mb-4 text-xl font-semibold">Profile Information</h2>
+          <div className="space-y-2">
+            <p>
+              <span className="font-semibold">Name:</span> Current User
+            </p>
+            <p>
+              <span className="font-semibold">Email:</span> user@example.com
+            </p>
+            <p className="mt-4 text-sm text-gray-600">This is a static nested route under /users</p>
+          </div>
+        </div>
+
+        <div className="space-x-4">
+          <Link to="/users" className="text-blue-600 hover:underline">
+            ← Back to Users
+          </Link>
+          <Link to="/" className="text-blue-600 hover:underline">
+            Home
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+}