slideshare/src/components/ui/buttons/BackButton.tsx
Michael Mainguy b4b61ad761 Consolidate button components and eliminate barrel exports
## 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>
2025-08-21 11:42:42 -05:00

31 lines
592 B
TypeScript

import React from 'react';
import type { ReactNode } from 'react';
import './BackButton.css';
interface BackButtonProps {
children?: ReactNode;
onClick?: () => void;
disabled?: boolean;
className?: string;
title?: string;
}
export const BackButton: React.FC<BackButtonProps> = ({
children = '← Back',
onClick,
disabled = false,
className = '',
title,
}) => {
return (
<button
type="button"
className={`back-button ${className}`.trim()}
onClick={onClick}
disabled={disabled}
title={title}
>
{children}
</button>
);
};