51 lines
1.6 KiB
TypeScript
51 lines
1.6 KiB
TypeScript
'use client';
|
|
import { Icon, Text, ThemeButton, Row } from '@umami/react-zen';
|
|
import Link from 'next/link';
|
|
import LanguageButton from '@/components/input/LanguageButton';
|
|
import ProfileButton from '@/components/input/ProfileButton';
|
|
import TeamsButton from '@/components/input/TeamsButton';
|
|
import Icons from '@/components/icons';
|
|
import { useMessages, useTeamUrl } from '@/components/hooks';
|
|
|
|
export function NavBar() {
|
|
const { formatMessage, labels } = useMessages();
|
|
const { renderTeamUrl } = useTeamUrl();
|
|
|
|
const links = [
|
|
{ label: formatMessage(labels.dashboard), url: renderTeamUrl('/dashboard') },
|
|
{ label: formatMessage(labels.websites), url: renderTeamUrl('/websites') },
|
|
{ label: formatMessage(labels.reports), url: renderTeamUrl('/reports') },
|
|
{ label: formatMessage(labels.settings), url: renderTeamUrl('/settings') },
|
|
].filter(n => n);
|
|
|
|
return (
|
|
<Row justifyContent="space-between" alignItems="center" paddingX="4" paddingY="3">
|
|
<Row alignItems="center" gap="3">
|
|
<Icon size="md">
|
|
<Icons.Logo />
|
|
</Icon>
|
|
<Text size="3" weight="bold">
|
|
umami
|
|
</Text>
|
|
</Row>
|
|
<Row gap="4">
|
|
{links.map(({ url, label }) => {
|
|
return (
|
|
<Link key={url} href={url} prefetch={url !== '/settings'}>
|
|
<Text>{label}</Text>
|
|
</Link>
|
|
);
|
|
})}
|
|
</Row>
|
|
<Row justifyContent="flex-end">
|
|
<TeamsButton />
|
|
<ThemeButton />
|
|
<LanguageButton />
|
|
<ProfileButton />
|
|
</Row>
|
|
</Row>
|
|
);
|
|
}
|
|
|
|
export default NavBar;
|