MyClub/DOCS/CLUB_MODAL_IMPLEMENTATION.md

Club Modal Implementation

Overview

Added an interactive modal that displays detailed club information when clicking on any team in the league tables.

Features

• Click-to-view: Users can click on any club row in the table to view details
• Club Information Display:
  • Club logo with fallback
  • Club name
  • Current rank position badge
  • Statistics (matches played, wins, draws, losses, score, points)
  • Direct link to FACR profile
• Modern UI: Clean modal design with blur backdrop effect

Components Modified

1. New Component: ClubModal.tsx

• Location: frontend/src/components/home/ClubModal.tsx
• Displays club details in a modal dialog
• Supports both football and futsal club types
• Generates FACR profile links dynamically

2. LeagueTablePro.tsx (Homepage)

• Added modal state management
• Made table rows clickable with hover cursor
• Integrated ClubModal component

3. TableSection.tsx (Alternative Homepage)

• Added modal state management
• Made table rows clickable with hover cursor
• Integrated ClubModal component

4. TablesPage.tsx (Tables Page)

• Added modal state management
• Made table rows clickable with hover cursor
• Integrated ClubModal component
• Extended TableRow type to include team_id for FACR links

User Experience

1. User clicks on any team row in the standings table
2. Modal opens with smooth animation and backdrop blur
3. Displays comprehensive club statistics
4. User can click "Zobrazit na FAČR" to open the club's official profile
5. Modal closes via close button, X button, or clicking outside

Technical Details

• Chakra UI Modal component for consistent design
• State management via React hooks (useState)
• TypeScript typed props for type safety
• Responsive design that works on all screen sizes
• Fallback handling for missing logos or data