openreplay/frontend/app/layout/TopRight.tsx
2025-05-09 11:29:12 +02:00

47 lines
1.5 KiB
TypeScript

import { Popover, Space } from 'antd';
import React from 'react';
import { getInitials } from 'App/utils';
import Notifications from 'Components/Alerts/Notifications/Notifications';
import HealthStatus from 'Components/Header/HealthStatus';
import UserMenu from 'Components/Header/UserMenu/UserMenu';
import LanguageSwitcher from 'Components/LanguageSwitcher/LanguageSwitcher';
import GettingStartedProgress from 'Shared/GettingStarted/GettingStartedProgress';
import ProjectDropdown from 'Shared/ProjectDropdown';
import { useStore } from 'App/mstore';
import { observer } from 'mobx-react-lite';
import ThemeToggle from 'Components/ThemeToggle';
function TopRight() {
const { userStore } = useStore();
const spotOnly = userStore.scopeState === 1;
const { account } = userStore;
return (
<Space style={{ lineHeight: '0' }}>
{spotOnly ? null : (
<>
<ProjectDropdown />
<GettingStartedProgress />
<Notifications />
{account.name ? <HealthStatus /> : null}
</>
)}
<ThemeToggle />
<Popover content={<UserMenu />} placement="topRight">
<div className="flex items-center cursor-pointer">
<div
className="bg-tealx rounded-full flex items-center justify-center color-white"
style={{ width: '32px', height: '32px' }}
>
{getInitials(account.name)}
</div>
</div>
</Popover>
</Space>
);
}
export default observer(TopRight);