43 lines
2.1 KiB
TypeScript
43 lines
2.1 KiB
TypeScript
import { useRosettaColors } from "@/app/hooks/useRosettaColors";
|
|
import { Box, Flex, Loader, Text } from "@mantine/core";
|
|
import classes from './Topbar.module.css'
|
|
import { useProtocolState } from "@/app/providers/ProtocolProvider/useProtocolState";
|
|
import { ProtocolState } from "@/app/providers/ProtocolProvider/ProtocolProvider";
|
|
import { WindowsFrameButtons } from "../WindowsFrameButtons/WindowsFrameButtons";
|
|
import { MacFrameButtons } from "../MacFrameButtons/MacFrameButtons";
|
|
|
|
export function Topbar() {
|
|
const colors = useRosettaColors();
|
|
const protocolState = useProtocolState();
|
|
|
|
|
|
return (
|
|
<Box className={classes.drag} ta={'center'} p={3} bg={colors.mainColor}>
|
|
{window.platform == 'win32' && <WindowsFrameButtons></WindowsFrameButtons>}
|
|
{window.platform == 'darwin' && <MacFrameButtons></MacFrameButtons>}
|
|
{window.platform == 'linux' && <WindowsFrameButtons></WindowsFrameButtons>}
|
|
{(protocolState == ProtocolState.CONNECTED || !window.location.hash.includes("main")) &&
|
|
<Flex align={'center'} justify={'center'}>
|
|
<Text fw={'bolder'} fz={13} c={'gray'}>
|
|
Rosetta Messenger
|
|
</Text>
|
|
</Flex>
|
|
}
|
|
{(protocolState != ProtocolState.CONNECTED && protocolState != ProtocolState.DEVICE_VERIFICATION_REQUIRED && window.location.hash.includes("main")) &&
|
|
<Flex align={'center'} gap={5} justify={'center'}>
|
|
<Loader size={12} color={colors.chevrons.active}></Loader>
|
|
<Text fw={'bolder'} fz={13} c={'gray'}>
|
|
Connecting...
|
|
</Text>
|
|
</Flex>
|
|
}
|
|
{(protocolState == ProtocolState.DEVICE_VERIFICATION_REQUIRED && window.location.hash.includes("main")) &&
|
|
<Flex align={'center'} gap={5} justify={'center'}>
|
|
<Text fw={'bolder'} fz={13} c={'gray'}>
|
|
Device verification required
|
|
</Text>
|
|
</Flex>
|
|
}
|
|
</Box>
|
|
)
|
|
} |