31 lines
946 B
TypeScript
31 lines
946 B
TypeScript
import React from 'react';
|
|
import { Link } from 'react-router-dom';
|
|
|
|
import { useTranslation } from 'react-i18next';
|
|
import { useGetSessionQuery } from './services/session';
|
|
import { useSelector } from './store';
|
|
|
|
export type HeaderProps = {
|
|
title?: string;
|
|
};
|
|
|
|
export const Header: React.FC<HeaderProps> = ({title}) => {
|
|
const { t } = useTranslation();
|
|
const { data } = useGetSessionQuery(undefined);
|
|
const { isMobile } = useSelector(state => state.screen);
|
|
|
|
return (
|
|
<header className="navbar hstack shadow-2 bg-panel rounded _header">
|
|
<h1 className="navbar-title text-primary mb-0 text-100">
|
|
{<Link to="/">{t('title')}</Link>}
|
|
{title && <> / {title}</>}
|
|
</h1>
|
|
{data && (
|
|
<button className="btn flat ml-auto primary">
|
|
<i className="fas fa-circle-user"></i>
|
|
{!isMobile && <span className="ml-1">{data.username}<span className="text-dimmed">@{data.host}</span></span>}
|
|
</button>
|
|
)}
|
|
</header>
|
|
);
|
|
};
|