Michael Mainguy
8376e77df7
## Major Refactoring - Broke down large components into focused, reusable pieces - Reduced NewPresentationPage.tsx from 238 to 172 lines - Reduced PresentationEditor.tsx from 457 to 261 lines - Eliminated functions exceeding 50-line guideline ## New Reusable Components - PresentationDetailsForm: Form inputs for title/description - AspectRatioSelector: Aspect ratio selection grid - ThemeSelectionSection: Theme selection wrapper - CreationActions: Action buttons and selected theme info - EmptyPresentationState: Empty presentation state display - SlidesSidebar: Complete sidebar with slides list - SlideThumbnail: Individual slide thumbnail with actions - LoadingState: Reusable loading component with spinner - ErrorState: Reusable error display with retry/back actions ## New Hooks - useSlideOperations: Custom hook for slide duplicate/delete logic ## Code Quality Improvements - Replaced browser alert() calls with AlertDialog component - Updated imports to use direct .tsx extensions per IMPORT_STANDARDS.md - Eliminated browser confirm() calls in favor of ConfirmDialog system - Consolidated duplicate loading/error state patterns - Improved type safety throughout ## Benefits - Better maintainability through component separation - Consistent UX with shared UI components - Code reuse across presentation components - Compliance with 200-line file guideline 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
63 lines
1.6 KiB
TypeScript
63 lines
1.6 KiB
TypeScript
import React from 'react';
|
|
import type { Theme } from '../../types/theme';
|
|
import './CreationActions.css';
|
|
|
|
interface CreationActionsProps {
|
|
selectedTheme: Theme | null;
|
|
error: string | null;
|
|
creating: boolean;
|
|
presentationTitle: string;
|
|
onCancel: () => void;
|
|
onCreate: () => void;
|
|
}
|
|
|
|
export const CreationActions: React.FC<CreationActionsProps> = ({
|
|
selectedTheme,
|
|
error,
|
|
creating,
|
|
presentationTitle,
|
|
onCancel,
|
|
onCreate
|
|
}) => {
|
|
return (
|
|
<section className="creation-actions">
|
|
<div className="selected-theme-info">
|
|
{selectedTheme && (
|
|
<div className="theme-preview-info">
|
|
<h3>Selected Theme: {selectedTheme.name}</h3>
|
|
<p>{selectedTheme.description}</p>
|
|
<div className="theme-stats">
|
|
<span>{selectedTheme.layouts.length} layouts available</span>
|
|
{selectedTheme.author && <span>by {selectedTheme.author}</span>}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{error && (
|
|
<div className="creation-error">
|
|
<p>Failed to create presentation: {error}</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="action-buttons">
|
|
<button
|
|
onClick={onCancel}
|
|
className="button secondary"
|
|
type="button"
|
|
disabled={creating}
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
onClick={onCreate}
|
|
className="button primary"
|
|
type="button"
|
|
disabled={!selectedTheme || !presentationTitle.trim() || creating}
|
|
>
|
|
{creating ? 'Creating...' : 'Create Presentation'}
|
|
</button>
|
|
</div>
|
|
</section>
|
|
);
|
|
}; |