100 lines
3.1 KiB
TypeScript
100 lines
3.1 KiB
TypeScript
import { ReactNode, useMemo, useState } from 'react'
|
|
import { HStack, VStack } from './../elements/LayoutPrimitives'
|
|
import { Dropdown, DropdownOption } from '../elements/DropdownElements'
|
|
import { StyledText } from '../elements/StyledText'
|
|
import { Button } from '../elements/Button'
|
|
import { currentThemeName } from '../../lib/themeUpdater'
|
|
import { Check } from 'phosphor-react'
|
|
|
|
export type HeaderDropdownAction =
|
|
| 'apply-dark-theme'
|
|
| 'apply-light-theme'
|
|
| 'navigate-to-install'
|
|
| 'navigate-to-emails'
|
|
| 'navigate-to-labels'
|
|
| 'navigate-to-profile'
|
|
| 'navigate-to-subscriptions'
|
|
| 'navigate-to-api'
|
|
| 'navigate-to-integrations'
|
|
| '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={{ py: '12px', px: '24px' }}>
|
|
<StyledText style="menuTitle">Theme</StyledText>
|
|
<HStack css={{ py: '8px', width: '100%', gap: '25px' }}>
|
|
<Button
|
|
style="themeSwitch"
|
|
css={{ background: '#FFFFFF' }}
|
|
data-state={isDark ? 'unselected' : 'selected'}
|
|
onClick={() => {
|
|
props.actionHandler('apply-light-theme')
|
|
setCurrentTheme(currentThemeName())
|
|
}}
|
|
>
|
|
{!isDark && <Check color="#F9D354" size={32} />}
|
|
</Button>
|
|
<Button
|
|
style="themeSwitch"
|
|
css={{ background: '#3D3D3D' }}
|
|
data-state={isDark ? 'selected' : 'unselected'}
|
|
onClick={() => {
|
|
props.actionHandler('apply-dark-theme')
|
|
setCurrentTheme(currentThemeName())
|
|
}}
|
|
>
|
|
{isDark && <Check color="#F9D354" size={32} />}
|
|
</Button>
|
|
</HStack>
|
|
</VStack>
|
|
<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={() => props.actionHandler('navigate-to-api')}
|
|
title="API Keys"
|
|
/>
|
|
<DropdownOption
|
|
onSelect={() => props.actionHandler('navigate-to-integrations')}
|
|
title="Integrations"
|
|
/>
|
|
<DropdownOption
|
|
onSelect={() => window.open('https://docs.omnivore.app', '_blank')}
|
|
title="Documentation"
|
|
/>
|
|
<DropdownOption
|
|
onSelect={() => window.Intercom('show')}
|
|
title="Feedback"
|
|
/>
|
|
<DropdownOption
|
|
onSelect={() => props.actionHandler('logout')}
|
|
title="Logout"
|
|
/>
|
|
</Dropdown>
|
|
)
|
|
}
|