fix: Replace Box with BottomNavigationAction to fix React prop warning
Some checks failed
CI/CD Pipeline / Lint and Test (push) Has been cancelled
CI/CD Pipeline / E2E Tests (push) Has been cancelled
CI/CD Pipeline / Build Application (push) Has been cancelled

This commit is contained in:
2025-10-03 20:56:08 +00:00
parent fb9f9d25c7
commit eb78e75582

View File

@@ -64,38 +64,38 @@ export const TabBar = () => {
>
{tabs.map((tab) => {
if (tab.value === 'voice') {
// Center voice button
// Center voice button - using BottomNavigationAction as wrapper to avoid prop warnings
return (
<Box
<BottomNavigationAction
key="voice-placeholder"
sx={{
flex: 1,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
}}
>
<IconButton
aria-label="voice command"
onClick={() => {
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>
</Box>
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 (