diff --git a/webapp/src/App.js b/webapp/src/App.js
index 12edaa06..36fc5c07 100644
--- a/webapp/src/App.js
+++ b/webapp/src/App.js
@@ -19,6 +19,7 @@ import PrincipalView from './components/principalView/PrincipalView';
import Room from './components/rooms/Room'; // Importa el componente de sala
import CreateRoomForm from './components/rooms/CreateRoom'; // Importa el componente para crear sala
import JoinRoomForm from './components/rooms/JoinRoom'; // Importa el componente para unirse a sala
+import { Ranking } from './components/ranking/Ranking';
const App = () => {
@@ -62,6 +63,11 @@ const App = () => {
} />
+
+
+
+ } />
} />
} />
diff --git a/webapp/src/components/navbar/NavBar.js b/webapp/src/components/navbar/NavBar.js
index 72b2f4fa..dcf37cc5 100644
--- a/webapp/src/components/navbar/NavBar.js
+++ b/webapp/src/components/navbar/NavBar.js
@@ -1,5 +1,5 @@
import React, { useContext, useState } from 'react';
-import { AppBar, Toolbar, Button, IconButton, Avatar, Menu, MenuItem, Typography,ListItem, ListItemIcon , Switch } from '@mui/material';
+import { Divider, AppBar, Toolbar, Button, IconButton, Avatar, Menu, MenuItem, Typography,ListItem, ListItemIcon , Switch } from '@mui/material';
import { styled } from '@mui/system';
import { Link } from 'react-router-dom';
import { AuthContext } from '../authcontext';
@@ -113,12 +113,17 @@ const NavBar = ({ setDarkMode, darkMode}) => {
{username}
-
+
+
+
+
>
diff --git a/webapp/src/components/ranking/Ranking.js b/webapp/src/components/ranking/Ranking.js
new file mode 100644
index 00000000..f38ad9ce
--- /dev/null
+++ b/webapp/src/components/ranking/Ranking.js
@@ -0,0 +1,27 @@
+import React from 'react';
+
+export function Ranking({darkMode}){
+ // Aquí puedes agregar la lógica para obtener los datos del ranking de usuarios
+ const users = [
+ { name: 'Usuario 1', dailyQuestions: 10 },
+ { name: 'Usuario 2', dailyQuestions: 8 },
+ { name: 'Usuario 3', dailyQuestions: 5 },
+ // Agrega más usuarios según sea necesario
+ ];
+
+ // Ordenar los usuarios por número de preguntas diarias acertadas
+ users.sort((a, b) => b.dailyQuestions - a.dailyQuestions);
+
+ return (
+
+
Ranking de Usuarios
+
+ {users.map((user, index) => (
+ -
+ {user.name} - {user.dailyQuestions} preguntas acertadas
+
+ ))}
+
+
+ );
+}
\ No newline at end of file
diff --git a/webapp/src/internacionalizacion/locales/en/translation.json b/webapp/src/internacionalizacion/locales/en/translation.json
index 01799f20..9a00913e 100644
--- a/webapp/src/internacionalizacion/locales/en/translation.json
+++ b/webapp/src/internacionalizacion/locales/en/translation.json
@@ -39,6 +39,8 @@
"timeUnitHours" : " hours ",
"questionsPercentage": " %",
+ "ranking": "Ranking",
+
"loginWelcomeMessage": "Welcome ",
"loginDate": "Your account was created on ",
"loginMessage": "Log in",
diff --git a/webapp/src/internacionalizacion/locales/es/translation.json b/webapp/src/internacionalizacion/locales/es/translation.json
index a83a9e5d..09a0fe34 100644
--- a/webapp/src/internacionalizacion/locales/es/translation.json
+++ b/webapp/src/internacionalizacion/locales/es/translation.json
@@ -39,6 +39,8 @@
"timeUnitHours" : " horas ",
"questionsPercentage": " %",
+ "ranking": "Ranking",
+
"loginWelcomeMessage": "Bienvenido ",
"loginDate": "Tu cuenta fue creada el ",
"loginMessage": "Inicia sesión",