Update src/App.js

src/App.js

@@ -1,7 +1,6 @@
 import React, { useState, useEffect, useMemo } from 'react';
-import { Search, Trophy, Medal, Award, BarChart3, Filter, RefreshCw, ExternalLink, Clock, Zap, Target, ArrowUpDown, ArrowUp, ArrowDown } from 'lucide-react';
 
-const LeaderboardUrology = () => {
+const UrologyLeaderboard = () => {
   const [searchTerm, setSearchTerm] = useState('');
   const [filterLicense, setFilterLicense] = useState('all');
   const [sortBy, setSortBy] = useState('accuracy');
@@ -174,9 +173,9 @@ const LeaderboardUrology = () => {
 
   const getRankIcon = (index) => {
     switch(index) {
-      case 0: return <Trophy className="w-6 h-6 text-yellow-500" />;
-      case 1: return <Medal className="w-6 h-6 text-gray-400" />;
-      case 2: return <Award className="w-6 h-6 text-amber-600" />;
+      case 0: return <span className="text-2xl">🏆</span>;
+      case 1: return <span className="text-2xl">🥈</span>;
+      case 2: return <span className="text-2xl">🥉</span>;
       default: return <span className="text-xl font-bold text-gray-500">#{index + 1}</span>;
     }
   };
@@ -193,7 +192,7 @@ const LeaderboardUrology = () => {
   };
 
   const formatDate = (dateString) => {
-    return new Date(dateString).toLocaleDateString('es-ES', {
+    return new Date(dateString).toLocaleDateString('en-US', {
       day: '2-digit',
       month: '2-digit',
       year: 'numeric',
@@ -203,18 +202,18 @@ const LeaderboardUrology = () => {
   };
 
   const getSortIcon = (column) => {
-    if (sortBy !== column) return <ArrowUpDown className="w-4 h-4 text-gray-400" />;
+    if (sortBy !== column) return <span className="text-gray-400">↕️</span>;
     return sortOrder === 'desc' ? 
-      <ArrowDown className="w-4 h-4 text-blue-500" /> : 
-      <ArrowUp className="w-4 h-4 text-blue-500" />;
+      <span className="text-blue-500">⬇️</span> : 
+      <span className="text-blue-500">⬆️</span>;
   };
 
   if (loading) {
     return (
       <div className="min-h-screen bg-gradient-to-br from-slate-900 via-blue-900 to-indigo-900 flex items-center justify-center">
         <div className="text-center">
-          <div className="animate-spin rounded-full h-16 w-16 border-b-2 border-white mb-4"></div>
-          <p className="text-white text-xl">Cargando leaderboard...</p>
+          <div className="animate-spin rounded-full h-16 w-16 border-b-2 border-white mb-4 mx-auto"></div>
+          <p className="text-white text-xl">Loading leaderboard...</p>
         </div>
       </div>
     );
@@ -249,7 +248,7 @@ const LeaderboardUrology = () => {
         <div className="mb-6 flex flex-wrap gap-4 items-center justify-between">
           <div className="flex flex-wrap gap-4 items-center">
             <div className="relative">
-              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-5 h-5" />
+              <span className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400">🔍</span>
               <input
                 type="text"
                 placeholder="Search model..."
@@ -260,7 +259,7 @@ const LeaderboardUrology = () => {
             </div>
             
             <div className="relative">
-              <Filter className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-5 h-5" />
+              <span className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400">📋</span>
               <select
                 value={filterLicense}
                 onChange={(e) => setFilterLicense(e.target.value)}
@@ -279,7 +278,7 @@ const LeaderboardUrology = () => {
             disabled={refreshing}
             className="flex items-center space-x-2 px-4 py-2 bg-green-600 hover:bg-green-700 disabled:bg-green-600/50 text-white rounded-lg transition-colors"
           >
-            <RefreshCw className={`w-4 h-4 ${refreshing ? 'animate-spin' : ''}`} />
+            <span className={refreshing ? 'animate-spin' : ''}>🔄</span>
             <span>{refreshing ? 'Updating...' : 'Update'}</span>
           </button>
         </div>
@@ -304,7 +303,7 @@ const LeaderboardUrology = () => {
                       }}
                     >
                       <div className="flex items-center space-x-1">
-                        <Target className="w-4 h-4" />
+                        <span>🎯</span>
                         <span>Accuracy</span>
                         {getSortIcon('accuracy')}
                       </div>
@@ -324,7 +323,7 @@ const LeaderboardUrology = () => {
                       }}
                     >
                       <div className="flex items-center space-x-1">
-                        <Clock className="w-4 h-4" />
+                        <span>🕒</span>
                         <span>Date</span>
                         {getSortIcon('submittedTime')}
                       </div>
@@ -346,7 +345,7 @@ const LeaderboardUrology = () => {
                         <div className="flex flex-col">
                           <div className="flex items-center space-x-2">
                             <span className="text-white font-medium">{item.model.split('/').pop()}</span>
-                            <ExternalLink className="w-4 h-4 text-gray-400 opacity-0 group-hover:opacity-100 transition-opacity cursor-pointer" />
+                            <span className="text-gray-400 opacity-0 group-hover:opacity-100 transition-opacity cursor-pointer">🔗</span>
                           </div>
                           <span className="text-sm text-gray-400">{item.model.split('/')[0]}</span>
                         </div>
@@ -374,7 +373,7 @@ const LeaderboardUrology = () => {
                       </td>
                       <td className="px-6 py-4">
                         <div className="flex items-center space-x-2">
-                          <Zap className="w-4 h-4 text-yellow-400" />
+                          <span>⚡</span>
                           <span className="text-white">{formatParams(item.params)}</span>
                         </div>
                       </td>
@@ -438,4 +437,4 @@ const LeaderboardUrology = () => {
   );
 };
 
-export default LeaderboardUrology;
+export default UrologyLeaderboard;