first commit

app/users/[userId]/UserProfileClient.tsx

@@ -0,0 +1,41 @@
+"use client";
+
+import { useParams } from "next/navigation";
+import { useState } from "react";
+
+export default function UserProfileClient() {
+  // 1. Read dynamic route params from context using TypeScript generics
+  const params = useParams<{ userId: string }>();
+  const userId = params.userId;
+
+  const [isFollowing, setIsFollowing] = useState<boolean>(false);
+
+  return (
+    <div className="card w-96 bg-base-100 shadow-xl border border-base-200">
+      <div className="card-body">
+        <div className="flex justify-between items-center">
+          <h2 className="card-title text-base-content">Client Component</h2>
+          <span className="badge badge-accent badge-outline">useParams()</span>
+        </div>
+
+        <p className="py-2 text-sm text-base-content/70">
+          Loaded Profile for User ID:{" "}
+          <span className="badge badge-neutral font-mono font-semibold">
+            {userId}
+          </span>
+        </p>
+
+        <div className="card-actions justify-end mt-4">
+          <button
+            onClick={() => setIsFollowing(!isFollowing)}
+            className={`btn ${
+              isFollowing ? "btn-outline btn-error" : "btn-primary"
+            }`}
+          >
+            {isFollowing ? "Unfollow" : "Follow User"}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}