\n {/* Logo/Title */}\n

\n \n

\n Pixel Studio\n

\n\n {/* Menu Items */}\n

\n {/* File Menu */}\n

\n \n {activeMenu === 'file' && (\n

\n handleMenuAction('new')}\n className=\"w-full px-4 py-2 text-left text-sm text-gray-700 dark:text-gray-300 darker:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 darker:hover:bg-dark-200 first:rounded-t-lg\"\n >\n New Canvas\n \n

\n handleMenuAction('export-png')}\n className=\"w-full px-4 py-2 text-left text-sm text-gray-700 dark:text-gray-300 darker:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 darker:hover:bg-dark-200\"\n >\n Export as PNG\n \n handleMenuAction('export-svg')}\n className=\"w-full px-4 py-2 text-left text-sm text-gray-700 dark:text-gray-300 darker:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 darker:hover:bg-dark-200 last:rounded-b-lg\"\n >\n Export as SVG\n \n

\n )}\n

\n\n {/* Edit Menu */}\n

\n \n {activeMenu === 'edit' && (\n

\n { onUndo(); setActiveMenu(null); }}\n disabled={!canUndo}\n className=\"w-full px-4 py-2 text-left text-sm text-gray-700 dark:text-gray-300 darker:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 darker:hover:bg-dark-200 disabled:opacity-50 disabled:cursor-not-allowed first:rounded-t-lg\"\n >\n Undo\n \n { onRedo(); setActiveMenu(null); }}\n disabled={!canRedo}\n className=\"w-full px-4 py-2 text-left text-sm text-gray-700 dark:text-gray-300 darker:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 darker:hover:bg-dark-200 disabled:opacity-50 disabled:cursor-not-allowed\"\n >\n Redo\n \n

\n handleMenuAction('clear')}\n className=\"w-full px-4 py-2 text-left text-sm text-red-600 dark:text-red-400 darker:text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20 darker:hover:bg-red-900/30 last:rounded-b-lg\"\n >\n Clear Canvas\n \n

\n )}\n

\n\n {/* View Menu */}\n

\n \n {activeMenu === 'view' && (\n

\n { onToggleGrid(); setActiveMenu(null); }}\n className=\"w-full px-4 py-2 text-left text-sm text-gray-700 dark:text-gray-300 darker:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 darker:hover:bg-dark-200 first:rounded-t-lg last:rounded-b-lg\"\n >\n {showGrid ? 'Hide Grid' : 'Show Grid'}\n \n

\n )}\n

\n\n {/* Settings */}\n \n

\n\n {/* Center Actions */}\n

\n \n \n \n \n \n \n \n

\n \n \n \n \n

\n\n {/* Right Side Info */}\n

\n {canvasWidth} × {canvasHeight}\n

\n 100%\n

\n \n {/* User Section */}\n {user ? (\n

\n handleMenuClick('user')}\n className=\"flex items-center gap-2 hover:bg-gray-100 dark:hover:bg-gray-800 darker:hover:bg-dark-200 rounded-lg p-1 transition-colors\"\n >\n

\n \n {user.display_name?.[0]?.toUpperCase() || user.username[0].toUpperCase()}\n \n

\n \n \n \n {activeMenu === 'user' && (\n

\n {user.display_name || user.username}\n

\n {user.email}\n

\n handleMenuAction('logout')}\n className=\"w-full px-4 py-2 text-left text-sm text-red-600 dark:text-red-400 darker:text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20 darker:hover:bg-red-900/30 rounded-b-lg\"\n >\n Sign Out\n \n

\n )}\n

\n ) : (\n \n Sign In\n \n )}\n

\n\n {/* Click outside to close menus */}\n {activeMenu && (\n

setActiveMenu(null)}\n />\n )}\n

\n\n {/* Settings Modal */}\n setShowSettings(false)}\n theme={theme}\n onThemeChange={onThemeChange}\n />\n \n );\n}","deleted","label",[169,170,150],"frontend","components","permalink","https://www.val.town/x/loading/pixelart/code/frontend/components/TopMenuBar.tsx","extension","actionData","errors"]