/ src / App.tsx
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;