import { useAtom } from "jotai"; import { actionLoadScene, actionShortcuts } from "../actions"; import { ActionManager } from "../actions/manager"; import { getShortcutFromShortcutName } from "../actions/shortcuts"; import { COOKIES } from "../constants"; import { collabDialogShownAtom } from "../excalidraw-app/collab/Collab"; import { t } from "../i18n"; import { ExcalLogo, HelpIcon, LoadIcon, PlusPromoIcon, UsersIcon, } from "./icons"; import "./WelcomeScreen.scss"; const isExcalidrawPlusSignedUser = document.cookie.includes( COOKIES.AUTH_STATE_COOKIE, ); const WelcomeScreenItem = ({ label, shortcut, onClick, icon, link, }: { label: string; shortcut: string | null; onClick?: () => void; icon: JSX.Element; link?: string; }) => { if (link) { return (
{icon} {label}
); } return ( ); }; const WelcomeScreen = ({ actionManager }: { actionManager: ActionManager }) => { const [, setCollabDialogShown] = useAtom(collabDialogShownAtom); let subheadingJSX; if (isExcalidrawPlusSignedUser) { subheadingJSX = t("welcomeScreen.switchToPlusApp") .split(/(Excalidraw\+)/) .map((bit) => { if (bit === "Excalidraw+") { return ( Excalidraw+ ); } return bit; }); } else { subheadingJSX = t("welcomeScreen.data"); } return (
{ExcalLogo} Excalidraw
{subheadingJSX}
actionManager.executeAction(actionLoadScene)} shortcut={getShortcutFromShortcutName("loadScene")} icon={LoadIcon} /> setCollabDialogShown(true)} icon={UsersIcon} /> actionManager.executeAction(actionShortcuts)} label={t("helpDialog.title")} shortcut="?" icon={HelpIcon} /> {!isExcalidrawPlusSignedUser && ( )}
); }; export default WelcomeScreen;