App.tsx
1 import { useState } from 'react'; 2 import { BrowserRouter as Router, Route, Routes } from 'react-router-dom'; 3 import { useTranslation } from 'react-i18next'; 4 import Header from './components/Header'; 5 import Footer from './components/Footer'; 6 import KeenSlider from './components/KeenSlider'; 7 import Settings from './pages/Settings'; 8 import './i18n'; // Import the i18n configuration 9 import './App.css'; 10 11 const App = () => { 12 const { i18n } = useTranslation(); 13 const [activeIcon, setActiveIcon] = useState<'musical-note' | 'square-3-stack-3d' | 'user'>('musical-note'); 14 15 const handleIconClick = (icon: 'musical-note' | 'square-3-stack-3d' | 'user') => { 16 setActiveIcon(icon); 17 }; 18 19 const handleLanguageChange = (locale: string) => { 20 i18n.changeLanguage(locale); 21 }; 22 23 return ( 24 <Router> 25 <div className="min-h-screen flex flex-col bg-neutral-900"> 26 <Routes> 27 <Route path="/settings" element={<Settings onLanguageChange={handleLanguageChange} />} /> 28 <Route path="*" element={ 29 <> 30 <Header fireLink="/streak" gearLink="/settings" /> 31 <div className="flex-grow flex w-full"> 32 <Routes> 33 <Route path="/" element={<KeenSlider initialSongs={[]} onSongChange={() => {}} onVoiceButtonResponse={() => {}} onPlay={() => {}} />} /> 34 <Route path="/decks" element={<div className="w-full h-full">Decks Page</div>} /> 35 <Route path="/profile" element={<div className="w-full h-full">Profile Page</div>} /> 36 <Route path="/streak" element={<div className="w-full h-full">Streak Page</div>} /> 37 </Routes> 38 </div> 39 <Footer activeIcon={activeIcon} onIconClick={handleIconClick} /> 40 </> 41 } /> 42 </Routes> 43 </div> 44 </Router> 45 ); 46 }; 47 48 export default App;