30 lines
915 B
React
30 lines
915 B
React
import { Link } from 'react-router-dom'
|
|
import { useApp } from '../context/AppContext'
|
|
import { colorToCss } from '../utils/color'
|
|
|
|
export default function UserBar() {
|
|
const { state } = useApp()
|
|
const user = state.currentUser
|
|
|
|
return (
|
|
<div className="flex items-center gap-2 px-3 py-3 border-t border-gray-700/60 bg-gray-900/80">
|
|
<div
|
|
className="w-8 h-8 rounded-full flex items-center justify-center text-white text-sm font-semibold shrink-0"
|
|
style={{ backgroundColor: colorToCss(user?.color) }}
|
|
>
|
|
{user?.name?.[0]?.toUpperCase() ?? '?'}
|
|
</div>
|
|
<span className="text-sm font-medium text-gray-200 truncate flex-1">
|
|
{user?.name ?? '…'}
|
|
</span>
|
|
<Link
|
|
to="/settings"
|
|
title="Settings"
|
|
className="text-gray-400 hover:text-gray-200 transition-colors text-base px-1"
|
|
>
|
|
⚙
|
|
</Link>
|
|
</div>
|
|
)
|
|
}
|