42 lines
1.3 KiB
TypeScript
42 lines
1.3 KiB
TypeScript
import { Link } from "react-router-dom";
|
|
import { useAuth } from "./use-auth";
|
|
|
|
export function HomePage() {
|
|
const { user } = useAuth();
|
|
|
|
if (!user) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<div className="mx-auto max-w-3xl space-y-4">
|
|
<div className="rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
|
|
<h1 className="text-2xl font-semibold text-slate-900">Authenticated user</h1>
|
|
<dl className="mt-4 grid gap-3 text-sm text-slate-700 sm:grid-cols-2">
|
|
<div>
|
|
<dt className="font-medium text-slate-500">Name</dt>
|
|
<dd>{user.name}</dd>
|
|
</div>
|
|
<div>
|
|
<dt className="font-medium text-slate-500">Username</dt>
|
|
<dd>{user.username}</dd>
|
|
</div>
|
|
<div>
|
|
<dt className="font-medium text-slate-500">Role</dt>
|
|
<dd className="capitalize">{user.role}</dd>
|
|
</div>
|
|
</dl>
|
|
</div>
|
|
{user.role === "employee" ? (
|
|
<Link className="inline-flex rounded-md bg-blue-600 px-4 py-2 text-sm font-medium text-white" to="/orders">
|
|
Open orders
|
|
</Link>
|
|
) : (
|
|
<div className="rounded-xl border border-slate-200 bg-white p-4 text-sm text-slate-600 shadow-sm">
|
|
Orders workspace is available to employee accounts only.
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|