## 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>
31 lines
592 B
TypeScript
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>
|
|
);
|
|
}; |