144 lines
4.3 KiB
TypeScript
144 lines
4.3 KiB
TypeScript
'use client';
|
|
|
|
import { usePathname, useRouter } from 'next/navigation';
|
|
import { useState } from 'react';
|
|
import { BottomNavigation, BottomNavigationAction, Paper, Fab, Box, IconButton } from '@mui/material';
|
|
import {
|
|
Home,
|
|
Timeline,
|
|
Insights,
|
|
Chat,
|
|
Mic,
|
|
} from '@mui/icons-material';
|
|
import { useTranslation } from '@/hooks/useTranslation';
|
|
|
|
export const TabBar = () => {
|
|
const { t } = useTranslation('common');
|
|
const router = useRouter();
|
|
const pathname = usePathname();
|
|
const [voiceOpen, setVoiceOpen] = useState(false);
|
|
|
|
const tabs = [
|
|
{ label: t('navigation.home'), icon: <Home />, value: '/' },
|
|
{ label: t('navigation.track'), icon: <Timeline />, value: '/track' },
|
|
{ label: '', icon: null, value: 'voice' }, // Placeholder for center button
|
|
{ label: t('navigation.insights'), icon: <Insights />, value: '/insights' },
|
|
{ label: t('navigation.aiChat'), icon: <Chat />, value: '/ai-assistant' },
|
|
];
|
|
|
|
return (
|
|
<>
|
|
<Paper
|
|
component="nav"
|
|
aria-label="Primary navigation"
|
|
sx={{
|
|
position: 'fixed',
|
|
bottom: { xs: 0, md: 20 },
|
|
left: { xs: 0, md: '50%' },
|
|
right: { xs: 0, md: 'auto' },
|
|
transform: { xs: 'none', md: 'translateX(-50%)' },
|
|
width: { xs: '100%', md: '30%' },
|
|
zIndex: 1000,
|
|
borderRadius: { xs: 0, md: 2 },
|
|
}}
|
|
elevation={3}
|
|
>
|
|
<BottomNavigation
|
|
value={pathname}
|
|
onChange={(event, newValue) => {
|
|
if (newValue !== 'voice') {
|
|
router.push(newValue);
|
|
}
|
|
}}
|
|
showLabels
|
|
sx={{
|
|
height: 64,
|
|
borderRadius: { xs: 0, md: 2 },
|
|
'& .MuiBottomNavigationAction-root': {
|
|
minWidth: 60,
|
|
'&.Mui-selected': {
|
|
color: 'primary.main',
|
|
},
|
|
},
|
|
}}
|
|
>
|
|
{tabs.map((tab) => {
|
|
if (tab.value === 'voice') {
|
|
// Center voice button - using BottomNavigationAction as wrapper to avoid prop warnings
|
|
return (
|
|
<BottomNavigationAction
|
|
key="voice-placeholder"
|
|
label=""
|
|
value="voice"
|
|
showLabel={false}
|
|
icon={
|
|
<IconButton
|
|
aria-label="voice command"
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
const voiceButton = document.querySelector('[aria-label="voice input"]') as HTMLButtonElement;
|
|
if (voiceButton) {
|
|
voiceButton.click();
|
|
}
|
|
}}
|
|
sx={{
|
|
bgcolor: '#FF69B4',
|
|
color: 'white',
|
|
width: 48,
|
|
height: 48,
|
|
'&:hover': {
|
|
bgcolor: '#FF1493',
|
|
},
|
|
}}
|
|
>
|
|
<Mic />
|
|
</IconButton>
|
|
}
|
|
sx={{ minWidth: 80 }}
|
|
/>
|
|
);
|
|
}
|
|
return (
|
|
<BottomNavigationAction
|
|
key={tab.value}
|
|
label={tab.label}
|
|
icon={tab.icon}
|
|
value={tab.value}
|
|
/>
|
|
);
|
|
})}
|
|
</BottomNavigation>
|
|
</Paper>
|
|
|
|
{/* Voice Command Floating Button - Mobile Only */}
|
|
<Fab
|
|
color="secondary"
|
|
aria-label="voice command"
|
|
onClick={() => {
|
|
// Trigger voice command - will integrate with existing VoiceFloatingButton
|
|
const voiceButton = document.querySelector('[aria-label="voice input"]') as HTMLButtonElement;
|
|
if (voiceButton) {
|
|
voiceButton.click();
|
|
}
|
|
}}
|
|
sx={{
|
|
display: { xs: 'flex', md: 'none' },
|
|
position: 'fixed',
|
|
bottom: 40,
|
|
left: '50%',
|
|
transform: 'translateX(-50%)',
|
|
zIndex: 1100,
|
|
width: 56,
|
|
height: 56,
|
|
bgcolor: '#FF69B4',
|
|
'&:hover': {
|
|
bgcolor: '#FF1493',
|
|
},
|
|
}}
|
|
>
|
|
<Mic />
|
|
</Fab>
|
|
</>
|
|
);
|
|
};
|