42 lines
1.3 KiB
TypeScript
42 lines
1.3 KiB
TypeScript
"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>
|
|
);
|
|
}
|