82 lines
2.5 KiB
TypeScript
82 lines
2.5 KiB
TypeScript
import { ReactNode, useMemo, useState } from 'react'
|
|
import { Box, HStack, VStack } from './../elements/LayoutPrimitives'
|
|
import {
|
|
Dropdown,
|
|
DropdownSeparator,
|
|
DropdownOption,
|
|
} from '../elements/DropdownElements'
|
|
import { StyledText } from '../elements/StyledText'
|
|
import { Button } from '../elements/Button'
|
|
import { currentThemeName } from '../../lib/themeUpdater'
|
|
|
|
export type HeaderDropdownAction =
|
|
| 'apply-darker-theme'
|
|
| 'apply-dark-theme'
|
|
| 'apply-light-theme'
|
|
| 'apply-lighter-theme'
|
|
| 'navigate-to-install'
|
|
| 'navigate-to-emails'
|
|
| 'navigate-to-labels'
|
|
| 'navigate-to-profile'
|
|
| 'increaseFontSize'
|
|
| 'decreaseFontSize'
|
|
| 'logout'
|
|
|
|
type DropdownMenuProps = {
|
|
username?: string
|
|
triggerElement: ReactNode
|
|
actionHandler: (action: HeaderDropdownAction) => void
|
|
}
|
|
|
|
export function DropdownMenu(props: DropdownMenuProps): JSX.Element {
|
|
const [currentTheme, setCurrentTheme] = useState(currentThemeName())
|
|
|
|
const isDark = useMemo(() => {
|
|
return currentTheme === 'Dark' || currentTheme === 'Darker'
|
|
}, [currentTheme])
|
|
|
|
return (
|
|
<Dropdown triggerElement={props.triggerElement}>
|
|
<VStack css={{ p: '$2' }}>
|
|
<StyledText style='menuTitle'>Theme</StyledText>
|
|
<HStack css={{ mt: '6px', mb: '6px', width: '100%', gap: '8px' }}>
|
|
<Button style='themeSwitch' css={{ background: "#FFFFFF", width: '50%' }} onClick={() => {
|
|
props.actionHandler('apply-lighter-theme')
|
|
setCurrentTheme(currentThemeName())
|
|
}}>
|
|
{ isDark ? '' : '✓' }
|
|
</Button>
|
|
<Button style='themeSwitch' css={{ background: "#3D3D3D", width: '50%' }} onClick={() => {
|
|
props.actionHandler('apply-dark-theme')
|
|
setCurrentTheme(currentThemeName())
|
|
}}>
|
|
{ isDark ? '✓' : '' }
|
|
</Button>
|
|
</HStack>
|
|
</VStack>
|
|
<DropdownSeparator />
|
|
<DropdownOption
|
|
onSelect={() => props.actionHandler('navigate-to-install')}
|
|
title="Install"
|
|
/>
|
|
<DropdownOption
|
|
onSelect={() => props.actionHandler('navigate-to-emails')}
|
|
title="Emails"
|
|
/>
|
|
<DropdownOption
|
|
onSelect={() => props.actionHandler('navigate-to-labels')}
|
|
title="Labels"
|
|
/>
|
|
<DropdownOption
|
|
onSelect={() => window.Intercom('show')}
|
|
title="Feedback"
|
|
/>
|
|
<DropdownOption
|
|
onSelect={() => props.actionHandler('logout')}
|
|
title="Logout"
|
|
hideSeparator
|
|
/>
|
|
</Dropdown>
|
|
)
|
|
}
|