Extract reusable UI components to reduce DRY violations
- Created StatusBadge component: Standardizes status badge display
- Supports tradeStatus prop for trade-specific styling
- Supports variant prop for simple badges (success/error/ready)
- Eliminates repetitive badge style combinations
- Created EmptyState component: Standardizes empty state display
- Handles loading and empty states consistently
- Supports message, hint, and action props
- Used across trades, invites, admin pages
- Created ConfirmationButton component: Standardizes confirmation flows
- Two-step confirmation pattern (action -> confirm/cancel)
- Supports different variants (danger/success/primary)
- Handles loading states automatically
- Used for cancel, complete, no-show actions
- Migrated pages to use new components:
- trades/page.tsx: StatusBadge, EmptyState, ConfirmationButton
- trades/[id]/page.tsx: StatusBadge
- invites/page.tsx: StatusBadge, EmptyState
- admin/trades/page.tsx: StatusBadge, EmptyState, ConfirmationButton
- admin/invites/page.tsx: StatusBadge
Benefits:
- Eliminated ~50+ lines of repetitive badge styling code
- Consistent UI patterns across all pages
- Easier to maintain and update styling
- Better type safety
All tests passing (32 frontend, 33 e2e)
counterweight
1a47b3643f
