slideshare/src/App.tsx
Michael Mainguy 9b0b16969f feat: implement complete presentation management system with aspect ratio support
## Major Features Added:

### Presentation Management
- Complete CRUD operations for presentations (create, read, update, delete)
- IndexedDB storage for offline presentation data
- Comprehensive presentation list view with metadata
- Navigation integration with header menu

### Slide Management
- Full slide editor with layout selection and content editing
- Live preview with theme styling applied
- Speaker notes functionality
- Enhanced layout previews with realistic sample content
- Themed layout selection with proper CSS inheritance

### Aspect Ratio System
- Support for 3 common presentation formats: 16:9, 4:3, 16:10
- Global CSS system baked into theme engine
- Visual aspect ratio selection in presentation creation
- Responsive scaling for different viewing contexts
- Print-optimized styling with proper dimensions

### User Experience Improvements
- Enhanced sample content generation for realistic previews
- Improved navigation with presentation management
- Better form styling and user interaction
- Comprehensive error handling and loading states
- Mobile-responsive design throughout

### Technical Infrastructure
- Complete TypeScript type system for presentations
- Modular component architecture
- CSS aspect ratio classes for theme consistency
- Enhanced template rendering with live updates
- Robust storage utilities with proper error handling

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-08-20 16:34:00 -05:00

34 lines
1.6 KiB
TypeScript

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'
import { ThemeBrowser, ThemeDetailPage, LayoutDetailPage, LayoutPreviewPage } from './components/themes'
import { NewPresentationPage, PresentationViewer, PresentationEditor, SlideEditor, PresentationsList } from './components/presentations'
import { AppHeader } from './components/AppHeader'
import { Welcome } from './components/Welcome'
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/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