## Button Component System - Create dedicated components/ui/buttons directory with 6 specialized button components: - Button.tsx: Universal button with variants (primary, secondary, danger, link) and sizes - ActionButton.tsx: Action buttons matching existing patterns - BackButton.tsx: Navigation back buttons - CancelLink.tsx: Cancel/link style buttons - CloseButton.tsx: Modal/preview close buttons with variants - NavigationButton.tsx: Presentation navigation buttons - Update key components to use new button system (SlideEditor, ContentEditor, Modal, AlertDialog, ConfirmDialog) - Replace inline styled-jsx with proper CSS files for AlertDialog and ConfirmDialog ## Barrel Export Elimination - Remove all barrel export files violating IMPORT_STANDARDS.md: - src/themes/index.ts - src/components/themes/index.ts - src/components/presentations/index.ts - src/components/slide-editor/index.ts - Update 15+ files to use direct imports from themeLoader.ts instead of barrel exports - Fix function naming conflict in ThemeDetailPage.tsx (loadTheme shadowing) - Follow project standards: direct imports with .tsx extensions for better Vite performance ## Benefits - Improved Vite tree shaking and module resolution performance - Consistent, reusable button system across application - Adherence to project coding standards and import conventions - Reduced bundle size through elimination of barrel export overhead 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
43 lines
2.2 KiB
TypeScript
43 lines
2.2 KiB
TypeScript
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'
|
|
import { ThemeBrowser } from './components/themes/ThemeBrowser.tsx';
|
|
import { ThemeDetailPage } from './components/themes/ThemeDetailPage.tsx';
|
|
import { LayoutDetailPage } from './components/themes/LayoutDetailPage.tsx';
|
|
import { LayoutPreviewPage } from './components/themes/LayoutPreviewPage.tsx';
|
|
import { NewPresentationPage } from './components/presentations/NewPresentationPage.tsx';
|
|
import { PresentationViewer } from './components/presentations/PresentationViewer.tsx';
|
|
import { PresentationMode } from './components/presentations/PresentationMode.tsx';
|
|
import { PresentationEditor } from './components/presentations/PresentationEditor.tsx';
|
|
import { SlideEditor } from './components/slide-editor/SlideEditor.tsx';
|
|
import { PresentationsList } from './components/presentations/PresentationsList.tsx';
|
|
import { AppHeader } from './components/AppHeader.tsx';
|
|
import { Welcome } from './components/Welcome.tsx';
|
|
import './App.css'
|
|
import './components/themes/ThemeBrowser.css'
|
|
|
|
function App() {
|
|
return (
|
|
<Router>
|
|
<div className="app-root">
|
|
<AppHeader />
|
|
<main className="app-main">
|
|
<Routes>
|
|
<Route path="/" element={<Welcome />} />
|
|
<Route path="/presentations" element={<PresentationsList />} />
|
|
<Route path="/presentations/new" element={<NewPresentationPage />} />
|
|
<Route path="/presentations/:presentationId/edit/slides/:slideNumber" element={<PresentationEditor />} />
|
|
<Route path="/presentations/:presentationId/view/slides/:slideNumber" element={<PresentationViewer />} />
|
|
<Route path="/presentations/:presentationId/present/:slideNumber" element={<PresentationMode />} />
|
|
<Route path="/presentations/:presentationId/slide/:slideId/edit" element={<SlideEditor />} />
|
|
<Route path="/themes" element={<ThemeBrowser />} />
|
|
<Route path="/themes/:themeId" element={<ThemeDetailPage />} />
|
|
<Route path="/themes/:themeId/layouts/:layoutId" element={<LayoutDetailPage />} />
|
|
<Route path="/themes/:themeId/layouts/:layoutId/preview" element={<LayoutPreviewPage />} />
|
|
</Routes>
|
|
</main>
|
|
</div>
|
|
</Router>
|
|
)
|
|
}
|
|
|
|
export default App
|