fix: Replace Box with BottomNavigationAction to fix React prop warning
This commit is contained in:
@@ -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 (
|
||||
|
||||
Reference in New Issue
Block a user