All files / src/pages TeamDetail.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import React from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import TeamStatsView from '../components/stats/TeamStatsView';
 
export default function TeamDetail() {
  const { league, teamName } = useParams<{ league: string; teamName: string }>();
  const navigate = useNavigate();
 
  if (!league || !teamName) {
    return (
      <div className="container mx-auto px-4 py-8">
        <div className="bg-red-900/20 border border-red-500 rounded-lg p-6">
          <h3 className="text-red-400 font-bold mb-2">Invalid Team</h3>
          <p className="text-red-300">League and team name are required</p>
        </div>
      </div>
    );
  }
 
  const decodedTeamName = decodeURIComponent(teamName);
 
  return (
    <div className="container mx-auto px-4 py-8">
      {/* Back Button */}
      <button
        onClick={() => navigate(-1)}
        className="mb-6 flex items-center gap-2 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors"
      >
        <svg
          className="w-5 h-5"
          fill="none"
          stroke="currentColor"
          viewBox="0 0 24 24"
        >
          <path
            strokeLinecap="round"
            strokeLinejoin="round"
            strokeWidth={2}
            d="M10 19l-7-7m0 0l7-7m-7 7h18"
          />
        </svg>
        Back
      </button>
 
      {/* Team Stats Component */}
      <TeamStatsView league={league} teamName={decodedTeamName} />
    </div>
  );
}