slideshare/src/components/AppHeader.tsx
Michael Mainguy 9ab40b7169 Create consolidated CSS architecture and utility system
- Add comprehensive application.css with utility classes and component base styles
- Consolidate common layout, spacing, typography, and component patterns
- Reduce CSS duplication by ~600 lines across components
- Implement utility-first approach with semantic component classes
- Update NewPresentationPage.css as demonstration (382→80 lines, 79% reduction)
- Add overlay color variables to theme system for modals
- Fix Modal and ConfirmDialog to use proper theme colors
- Simplify AppHeader component by removing unused dynamic title logic

The new CSS architecture provides:
- Utility classes for layout, spacing, typography, borders
- Base component classes for cards, buttons, forms, modals
- Consistent theming integration with color system
- Mobile-responsive design patterns
- Reduced maintenance overhead and improved consistency

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-08-21 13:58:32 -05:00

28 lines
787 B
TypeScript

import React from 'react';
import { Link } from 'react-router-dom';
export const AppHeader: React.FC = () => {
return (
<header className="app-header">
<nav className="app-nav">
<Link to="/" className="app-logo">
Slideshare
</Link>
<div className="nav-actions">
<Link to="/presentations" className="nav-link">
My Presentations
</Link>
<Link to="/presentations/new" className="nav-button primary">
Create Presentation
</Link>
{/* Theme browsing - Coming soon */}
<div style={{ display: 'none' }}>
<Link to="/themes" className="nav-link">
Themes
</Link>
</div>
</div>
</nav>
</header>
);
};