54 lines
1.8 KiB
TypeScript
54 lines
1.8 KiB
TypeScript
import Icon from '@/Components/Icon/Icon'
|
|
import { AccountMenuController } from '@/Controllers/AccountMenu/AccountMenuController'
|
|
import { NoAccountWarningController } from '@/Controllers/NoAccountWarningController'
|
|
import { observer } from 'mobx-react-lite'
|
|
import { MouseEventHandler, useCallback } from 'react'
|
|
import Button from '@/Components/Button/Button'
|
|
|
|
type Props = {
|
|
accountMenuController: AccountMenuController
|
|
noAccountWarningController: NoAccountWarningController
|
|
}
|
|
|
|
const NoAccountWarningContent = ({ accountMenuController, noAccountWarningController }: Props) => {
|
|
const showAccountMenu: MouseEventHandler = useCallback(
|
|
(event) => {
|
|
event.stopPropagation()
|
|
accountMenuController.setShow(true)
|
|
},
|
|
[accountMenuController],
|
|
)
|
|
|
|
const hideWarning = useCallback(() => {
|
|
noAccountWarningController.hide()
|
|
}, [noAccountWarningController])
|
|
|
|
return (
|
|
<div className="mt-4 grid grid-cols-1 rounded-md border border-border p-4">
|
|
<h1 className="sk-h3 m-0 text-base font-semibold lg:text-sm">Data not backed up</h1>
|
|
<p className="col-start-1 col-end-3 m-0 mt-1 text-base lg:text-sm">
|
|
Sign in or register to sync your notes to your other devices with end-to-end encryption.
|
|
</p>
|
|
<Button
|
|
primary
|
|
small
|
|
className="col-start-1 col-end-3 mt-3 justify-self-start uppercase"
|
|
onClick={showAccountMenu}
|
|
>
|
|
Open Account menu
|
|
</Button>
|
|
<button
|
|
onClick={hideWarning}
|
|
title="Ignore warning"
|
|
aria-label="Ignore warning"
|
|
style={{ height: '20px' }}
|
|
className="col-start-2 row-start-1 m-0 cursor-pointer rounded-md border-0 bg-transparent p-0 text-neutral hover:text-info"
|
|
>
|
|
<Icon type="close" className="block" />
|
|
</button>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default observer(NoAccountWarningContent)
|