1051f4c28c
* alex/offline-notice: offline notice * alex/offline-notice: cleanup * update copy --------- Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
93 lines
2.2 KiB
TypeScript
93 lines
2.2 KiB
TypeScript
import { ExternalLinkIcon } from '@radix-ui/react-icons'
|
|
import React, { useLayoutEffect } from 'react'
|
|
import { css, styled } from '~styles'
|
|
|
|
const STORAGE_KEY = 'tldraw_dismiss_beta_notification_3'
|
|
|
|
export function BetaNotification() {
|
|
const [isDismissed, setIsDismissed] = React.useState(true)
|
|
|
|
useLayoutEffect(() => {
|
|
try {
|
|
const storageIsDismissed = localStorage.getItem(STORAGE_KEY)
|
|
|
|
if (storageIsDismissed !== null) {
|
|
return
|
|
} else {
|
|
setIsDismissed(false)
|
|
}
|
|
} catch (err) {
|
|
setIsDismissed(false)
|
|
}
|
|
}, [])
|
|
|
|
const handleDismiss = React.useCallback(() => {
|
|
setIsDismissed(true)
|
|
localStorage.setItem(STORAGE_KEY, 'true')
|
|
}, [])
|
|
|
|
if (isDismissed) return null
|
|
|
|
return (
|
|
<Panel>
|
|
<div>
|
|
On April 4th 2023 at 9:30AM UTC, tldraw will be offline as we upgrade to our new version.
|
|
</div>
|
|
<div
|
|
style={{
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'space-between',
|
|
marginRight: -14,
|
|
marginLeft: -14,
|
|
marginBottom: -14,
|
|
}}
|
|
>
|
|
<Button onClick={handleDismiss}>Dismiss</Button>
|
|
<Link href="https://tldraw.substack.com/p/tldraws-upcoming-re-launch" target="_blank">
|
|
Learn more <ExternalLinkIcon style={{ marginLeft: 4, marginTop: 1, height: 14 }} />
|
|
</Link>
|
|
</div>
|
|
</Panel>
|
|
)
|
|
}
|
|
|
|
const Panel = styled('div', {
|
|
position: 'absolute',
|
|
top: 42,
|
|
left: 0,
|
|
margin: 16,
|
|
zIndex: 999,
|
|
backgroundColor: '$panel',
|
|
flexDirection: 'column',
|
|
boxShadow: '$panel',
|
|
padding: 16,
|
|
fontSize: 'var(--fontSizes-2)',
|
|
fontFamily: 'var(--fonts-ui)',
|
|
width: 300,
|
|
display: 'flex',
|
|
gap: 8,
|
|
border: '1px solid $panelContrast',
|
|
overflow: 'hidden',
|
|
borderRadius: 9,
|
|
})
|
|
|
|
const buttonStyles = css({
|
|
borderRadius: '$2',
|
|
backgroundColor: '$panel',
|
|
padding: '0 14px',
|
|
height: 40,
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
color: 'inherit',
|
|
font: 'inherit',
|
|
cursor: 'pointer',
|
|
border: 'none',
|
|
'&:hover': {
|
|
backgroundColor: '$hover',
|
|
},
|
|
})
|
|
|
|
const Button = styled('button', buttonStyles)
|
|
const Link = styled('a', buttonStyles)
|