problemi/client/components/Header.tsx

import { Link } from 'preact-router/match'
import { isAdministrator, User, UserRole } from '../../shared/model'
import { prependBaseUrl } from '../api'
import { useCurrentUser } from '../hooks/useCurrentUser'

const ROLE_LABEL: Record<UserRole, string> = {
    ['admin']: 'Admin',
    ['moderator']: 'Moderatore',
    ['student']: 'Studente',
}

export const Header = ({}) => {
    const [user] = useCurrentUser()

    return (
        <header>
            <div class="logo">
                <a href={prependBaseUrl('/')}>PHC / Problemi</a>
            </div>
            <nav>
                <div class="nav-item">
                    <Link activeClassName="active" href={prependBaseUrl('/scores')}>
                        Classifica
                    </Link>
                </div>
                {user ? (
                    <>
                        {isAdministrator(user.role) && (
                            <div class="nav-item">
                                <Link activeClassName="active" href={prependBaseUrl('/admin')}>
                                    Pannello Admin
                                </Link>
                            </div>
                        )}
                        <div class="nav-item">
                            <Link activeClassName="active" href={prependBaseUrl('/profile')}>
                                @{user.id}
                                {isAdministrator(user.role) && <> ({ROLE_LABEL[user.role]})</>}
                            </Link>
                        </div>
                    </>
                ) : (
                    <div class="nav-item">
                        <Link activeClassName="active" href={prependBaseUrl('/login')}>
                            Login
                        </Link>
                    </div>
                )}
            </nav>
        </header>
    )
}