Improved match cards UI and added grid

Author: jsg5625

src/App.tsx

@@ -46,7 +46,7 @@ function App() {
 
         {/* Tab Content */}
         {activeTab === 'matches' && (
-          <div className="grid gap-6">
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
             {matches.length > 0 ? (
               matches.map(match => (
                 <MatchCard key={match.id} match={match} onEdit={editMatch} onDelete={deleteMatch} />

src/components/MatchCard.tsx

@@ -29,60 +29,70 @@ export function MatchCard({ match, onEdit, onDelete }: MatchCardProps) {
   };
 
   return (
-    <div className="bg-white rounded-lg shadow-md p-4">
-      <div className="flex items-center justify-between mb-4">
-        <div className="flex items-center gap-2 text-gray-600">
-          <Calendar className="w-4 h-4" />
-          <span>{format(new Date(match.date), 'PPP', { locale: es })}</span>
+    <div className="bg-white rounded-lg shadow-md p-5 hover:shadow-lg transition-shadow">
+      {/* Header */}
+      <div className="flex items-center justify-between mb-5">
+        <div className="flex items-center gap-3 text-gray-500">
+          <Calendar className="w-5 h-5" />
+          <span className="text-sm font-medium">{format(new Date(match.date), 'PPP', { locale: es })}</span>
         </div>
-        <div className="flex items-center gap-2">
+        <div className="flex items-center gap-3">
           <button
             onClick={() => setIsEditing(true)}
-            className="p-2 text-emerald-600 hover:bg-emerald-50 rounded-full transition-colors"
+            className='rounded-full text-emerald-600 hover:text-emerald-200 transition-colors'
             title="Editar partido"
+            aria-label="Editar partido"
           >
             <Edit className="w-5 h-5" />
           </button>
           <button
             onClick={handleDelete}
-            className="text-red-500 hover:text-red-700 transition-colors"
+            className='rounded-full text-red-600 hover:text-red-200 transition-colors'
+            title="Eliminar partido"
+            aria-label="Eliminar partido"
           >
             <Trash2 className="w-5 h-5" />
           </button>
         </div>
       </div>
-      
-      <div className="grid grid-cols-3 gap-4 align-top">
+
+      {/* Match Details */}
+      <div className="grid grid-cols-3 gap-6 align-top">
+        {/* Team A */}
         <div className="text-center">
-          <div className="font-semibold mb-2">Equipo A</div>
-          <div className="text-2xl font-bold text-emerald-600">{match.teamA.score}</div>
-          <div className="mt-2 text-sm text-gray-600">
+          <div className="text-gray-700 font-semibold mb-2">Equipo A</div>
+          <div className="text-3xl font-bold text-emerald-600">{match.teamA.score}</div>
+          <div className="mt-2 text-sm text-gray-500">
             {match.teamA.players.map(p => p.name).join(', ')}
           </div>
         </div>
-        
-        <div className="text-center text-gray-400">vs</div>
-        
+
+        <div className="text-center text-gray-400 text-xl font-bold">vs</div>
+
+        {/* Team B */}
         <div className="text-center">
-          <div className="font-semibold mb-2">Equipo B</div>
-          <div className="text-2xl font-bold text-emerald-600">{match.teamB.score}</div>
-          <div className="mt-2 text-sm text-gray-600">
+          <div className="text-gray-700 font-semibold mb-2">Equipo B</div>
+          <div className="text-3xl font-bold text-emerald-600">{match.teamB.score}</div>
+          <div className="mt-2 text-sm text-gray-500">
             {match.teamB.players.map(p => p.name).join(', ')}
           </div>
         </div>
       </div>
-      
+
+      {/* Goals */}
       {match.goals.length > 0 && (
-        <div className="mt-4 pt-4 border-t">
-          <div className="flex items-center gap-2 mb-2">
-            <Trophy className="w-4 h-4 text-yellow-500" />
-            <span className="font-semibold">Goles</span>
+        <div className="mt-6 pt-4 border-t border-gray-200">
+          <div className="flex items-center gap-3 mb-3">
+            <Trophy className="w-5 h-5 text-yellow-500" />
+            <span className="text-lg font-semibold text-gray-700">Goles</span>
           </div>
-          <div className="text-sm text-gray-600">
+          <div className="text-sm text-gray-600 space-y-2">
             {match.goals.map((goal, index) => (
-              <div key={index} className="mb-1">
+              <div key={index}>
                 {`${match.teamA.players.concat(match.teamB.players).find(p => p.id === goal.playerId)?.name} (${goal.minute}')`}
-                {goal.assistById && ` - Asistencia: ${match.teamA.players.concat(match.teamB.players).find(p => p.id === goal.assistById)?.name}`}
+                {goal.assistById && (
+                  <span className="text-gray-500"> - Asistencia: {match.teamA.players.concat(match.teamB.players).find(p => p.id === goal.assistById)?.name}</span>
+                )}
               </div>
             ))}
           </div>