\n {/* Tab Headers */}\n

\n {tabs.map((tab) => (\n setActiveTab(tab.id)}\n className={`flex-1 flex items-center justify-center gap-2 px-2 py-3 text-sm font-medium transition-colors ${\n activeTab === tab.id\n ? 'text-blue-600 dark:text-blue-400 border-b-2 border-blue-600 dark:border-blue-400 bg-blue-50 dark:bg-blue-900/10 darker:bg-blue-900/20'\n : 'text-gray-600 dark:text-gray-400 darker:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 darker:hover:text-gray-100 hover:bg-gray-50 dark:hover:bg-gray-800 darker:hover:bg-dark-200'\n }`}\n >\n {tab.icon}\n {tab.name}\n \n ))}\n

\n\n {/* Tab Content */}\n

\n {activeTab === 'workspace' && (\n

\n \n

\n )}\n \n {activeTab === 'colors' && (\n

\n \n

\n )}\n \n {activeTab === 'layers' && (\n

\n \n

\n )}\n \n {activeTab === 'properties' && (\n

\n \n

\n )}\n \n {activeTab === 'export' && (\n

\n \n

\n )}\n

\n );\n}","deleted","label",[169,170,150],"frontend","components","permalink","https://www.val.town/x/loading/pixelart/code/frontend/components/RightSidebar.tsx","extension","actionData","errors"]