Code Interface - Copy this React, Tailwind Component to your project

Crea un frontend con questo stile per questo codice:import React, { useState, useEffect } from 'react'; import axios from 'axios'; import { useNavigate } from 'react-router-dom'; function Challenges() { const [challenges, setChallenges] = useState([]); const navigate = useNavigate(); useEffect(() => { const token = localStorage.getItem('token'); if (!token) { navigate('/login'); return; } fetchChallenges(); }, [navigate]); const fetchChallenges = async () => { try { const token = localStorage.getItem('token'); if (!token) { navigate('/login'); return; } console.log('Token used for fetching challenges:', token); const response = await axios.get('http://localhost:3003/challenges', { headers: { Authorization: `Bearer ${token}` } }); setChallenges(response.data); } catch (error) { console.error('Error fetching challenges:', error); if (error.response && error.response.status === 401) { localStorage.removeItem('token'); navigate('/login'); } } }; const participateInChallenge = async (id) => { try { const token = localStorage.getItem('token'); if (!token) { navigate('/login'); return; } console.log('Token used for participation:', token); await axios.post(`http://localhost:3003/challenges/${id}/participate`, {}, { headers: { Authorization: `Bearer ${token}` } }); alert('Partecipazione alla sfida registrata con successo!'); fetchChallenges(); // Aggiorna la lista delle sfide dopo la partecipazione } catch (error) { console.error('Error participating in challenge:', error.response?.data || error.message); if (error.response && error.response.status === 401) { localStorage.removeItem('token'); navigate('/login'); } else { alert('Errore nella partecipazione alla sfida.'); } } }; return ( <div> <h2>Sfide Sostenibili</h2> <ul> {challenges.map(challenge => ( <li key={challenge.id}> <h3>{challenge.title}</h3> <p>{challenge.description}</p> <p>Punti: {challenge.points}</p> <button onClick={() => participateInChallenge(challenge.id)}>Partecipa</button> </li> ))} </ul> </div> ); } export default Challenges;