diff --git a/apps/www/components/BetaNotification.tsx b/apps/www/components/BetaNotification.tsx new file mode 100644 index 000000000..0c981453f --- /dev/null +++ b/apps/www/components/BetaNotification.tsx @@ -0,0 +1,78 @@ +import React, { useLayoutEffect } from 'react' + +const STORAGE_KEY = 'tldraw_dismiss_beta_notification_2' + +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 ( +
+ + Try the new tldraw! + + +
+ ) +} diff --git a/apps/www/components/Editor.tsx b/apps/www/components/Editor.tsx index 26ffe5790..02143ef49 100644 --- a/apps/www/components/Editor.tsx +++ b/apps/www/components/Editor.tsx @@ -2,6 +2,7 @@ import { Tldraw, TldrawApp, TldrawProps, useFileSystem } from '@tldraw/tldraw' import * as React from 'react' import { useUploadAssets } from '~hooks/useUploadAssets' import * as gtag from '~utils/gtag' +import { BetaNotification } from './BetaNotification' declare const window: Window & { app: TldrawApp } @@ -39,6 +40,7 @@ const Editor = ({ id = 'home', ...rest }: EditorProps & Partial) => {...fileSystemEvents} {...rest} /> + ) } diff --git a/apps/www/components/MultiplayerEditor.tsx b/apps/www/components/MultiplayerEditor.tsx index 735a5e51b..1fcae8f2e 100644 --- a/apps/www/components/MultiplayerEditor.tsx +++ b/apps/www/components/MultiplayerEditor.tsx @@ -5,6 +5,7 @@ import { useMultiplayerState } from '~hooks/useMultiplayerState' import { useUploadAssets } from '~hooks/useUploadAssets' import { styled } from '~styles' import { RoomProvider } from '~utils/liveblocks' +import { BetaNotification } from './BetaNotification' interface Props { roomId: string @@ -53,6 +54,7 @@ function Editor({ roomId }: Props) { {...fileSystemEvents} {...events} /> + ) } diff --git a/packages/tldraw/src/components/ToolsPanel/HelpPanel.tsx b/packages/tldraw/src/components/ToolsPanel/HelpPanel.tsx index acdd70e25..a9344a714 100644 --- a/packages/tldraw/src/components/ToolsPanel/HelpPanel.tsx +++ b/packages/tldraw/src/components/ToolsPanel/HelpPanel.tsx @@ -1,5 +1,6 @@ import * as DropdownMenu from '@radix-ui/react-dropdown-menu' import { + ExternalLinkIcon, GitHubLogoIcon, HeartFilledIcon, QuestionMarkIcon, @@ -65,6 +66,7 @@ const LanguageMenuDropdown = () => { } const linksData = [ + { id: 'tldraw-beta', icon: ExternalLinkIcon, url: 'https://beta.tldraw.com' }, { id: 'github', icon: GitHubLogoIcon, url: 'https://github.com/tldraw/tldraw' }, { id: 'twitter', icon: TwitterLogoIcon, url: 'https://twitter.com/tldraw' }, { id: 'discord', icon: DiscordIcon, url: 'https://discord.gg/SBBEVCA4PG' }, diff --git a/packages/tldraw/src/translations/main.json b/packages/tldraw/src/translations/main.json index 91761dfdd..1cecd9b0f 100644 --- a/packages/tldraw/src/translations/main.json +++ b/packages/tldraw/src/translations/main.json @@ -123,5 +123,6 @@ "dialog.cancel": "Cancel", "dialog.no": "No", "dialog.yes": "Yes", - "enter.file.name": "Enter file name" + "enter.file.name": "Enter file name", + "tldraw-beta": "Try the new tldraw" }