import { ReactNode } from 'react'; import { Box, Button, ConditionalValue, Flex, HStack, IconButton, Span, Text, useDisclosure, } from '@chakra-ui/react'; import { LuAlignJustify, LuArrowBigLeft, LuKeySquare, LuLogIn, LuLogOut, LuMoon, LuSettings, LuSun, } from 'react-icons/lu'; import { MdHelp, MdHome, MdMore, MdOutlinePlaylistPlay, MdOutlineUploadFile, MdSupervisedUserCircle, } from 'react-icons/md'; import { useNavigate } from 'react-router-dom'; import { useColorMode, useColorModeValue } from '@/components/ui/color-mode'; import { DrawerBody, DrawerContent, DrawerHeader, DrawerRoot, } from '@/components/ui/drawer'; import { MenuContent, MenuItem, MenuRoot, MenuTrigger, } from '@/components/ui/menu'; import { useServiceContext } from '@/service/ServiceContext'; import { SessionState } from '@/service/SessionState'; import { useSessionService } from '@/service/session'; import { colors } from '@/theme/colors'; import { requestOpenSite, requestSignIn, requestSignOut, requestSignUp, } from '@/utils/sso'; export const TOP_BAR_HEIGHT = '50px'; export const BUTTON_TOP_BAR_PROPERTY = { variant: 'ghost' as ConditionalValue< 'ghost' | 'outline' | 'solid' | 'subtle' | 'surface' | 'plain' | undefined >, //colorPalette: "brand", fontSize: '20px', textTransform: 'uppercase', height: TOP_BAR_HEIGHT, }; export type TopBarProps = { children?: ReactNode; title?: string; }; const ButtonMenuLeft = ({ dest, title, icon, onClickEnd = () => {}, }: { dest: string; title: string; icon: ReactNode; onClickEnd?: () => void; }) => { const navigate = useNavigate(); return ( <> ); }; export const TopBar = ({ title, children }: TopBarProps) => { const { colorMode, toggleColorMode } = useColorMode(); const { clearToken } = useSessionService(); const { session } = useServiceContext(); const backColor = useColorModeValue('back.100', 'back.800'); const drawerDisclose = useDisclosure(); const onChangeTheme = () => { drawerDisclose.onOpen(); }; const navigate = useNavigate(); const onSignIn = (): void => { clearToken(); requestSignIn(); }; const onSignUp = (): void => { clearToken(); requestSignUp(); }; const onSignOut = (): void => { clearToken(); requestSignOut(); }; const onKarso = (): void => { requestOpenSite(); }; return ( {title && ( {title} )} {children} {session?.state !== SessionState.CONNECTED && ( <> )} {session?.state === SessionState.CONNECTED && ( Sign in as {session?.login ?? 'Fail'} navigate('/settings')} > Settings navigate('/help')} > Help Sign-out Karso (SSO) {colorMode === 'light' ? ( Set dark mode ) : ( Set light mode )} )} Karusic } /> } /> } /> ); };