53 lines
1.0 KiB
React
53 lines
1.0 KiB
React
import { useNavigate } from 'react-router-dom'
|
|
import { clearAuth, getRole } from '../lib/storage.js'
|
|
|
|
export default function Topbar() {
|
|
const navigate = useNavigate()
|
|
|
|
const role = getRole() || 'Admin'
|
|
|
|
function logout() {
|
|
clearAuth()
|
|
navigate('/login')
|
|
}
|
|
|
|
return (
|
|
<header className="p-6">
|
|
|
|
<div className="bg-white rounded-3xl p-5 shadow flex items-center">
|
|
|
|
<div className="flex-1">
|
|
|
|
<input
|
|
placeholder="Cari data..."
|
|
className="border rounded-xl px-4 py-2 w-full max-w-md"
|
|
/>
|
|
|
|
</div>
|
|
|
|
<div className="flex items-center gap-4">
|
|
|
|
<div>
|
|
<div className="font-bold">
|
|
Johanes
|
|
</div>
|
|
|
|
<div className="text-sm text-slate-500">
|
|
{role}
|
|
</div>
|
|
</div>
|
|
|
|
<button
|
|
onClick={logout}
|
|
className="px-4 py-2 rounded-xl border hover:bg-slate-100"
|
|
>
|
|
Keluar
|
|
</button>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</header>
|
|
)
|
|
} |