tuan.cna
|
be9da50fc5
|
🔄 Create Reusable CustomPagination Component
🎯 Component Architecture:
- Created standalone CustomPagination component in src/components/
- Fully reusable across Product and Project Tracker
- Props-based configuration for maximum flexibility
- Built-in theme detection and switching
🎨 Feature-Rich Implementation:
- Compact and full-size modes (compact prop)
- Configurable page size options
- Show/hide info and page size selector
- Custom class names for styling
- Loading states and disabled handling
📋 Props Interface:
- currentPage, pageSize, totalCount, totalPages
- loading, onPageChange, onPageSizeChange
- pageSizeOptions, showInfo, showPageSizeSelector
- compact, className for customization
🌓 Theme Integration:
- Automatic dark/light mode detection
- Redux state, localStorage, and document attribute fallbacks
- Real-time theme switching with MutationObserver
- Force re-render mechanism for theme changes
🔧 Technical Features:
- Built-in theme change listeners
- Proper event cleanup
- Dynamic styling based on theme and compact mode
- Hover effects and animations
- Professional button styling
🚀 Usage Examples:
- Project Tracker: compact={true} for smaller size
- Product List: compact={false} for full size
- Consistent API across all components
- Easy to maintain and extend
✅ Code Quality:
- Clean component separation
- No code duplication
- Proper prop validation
- Consistent styling patterns
- Reusable across entire application
|
2025-05-30 17:44:47 +07:00 |
|