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) => {
|
{tabs.map((tab) => {
|
||||||
if (tab.value === 'voice') {
|
if (tab.value === 'voice') {
|
||||||
// Center voice button
|
// Center voice button - using BottomNavigationAction as wrapper to avoid prop warnings
|
||||||
return (
|
return (
|
||||||
<Box
|
<BottomNavigationAction
|
||||||
key="voice-placeholder"
|
key="voice-placeholder"
|
||||||
sx={{
|
label=""
|
||||||
flex: 1,
|
value="voice"
|
||||||
display: 'flex',
|
showLabel={false}
|
||||||
alignItems: 'center',
|
icon={
|
||||||
justifyContent: 'center',
|
<IconButton
|
||||||
}}
|
aria-label="voice command"
|
||||||
>
|
onClick={(e) => {
|
||||||
<IconButton
|
e.stopPropagation();
|
||||||
aria-label="voice command"
|
const voiceButton = document.querySelector('[aria-label="voice input"]') as HTMLButtonElement;
|
||||||
onClick={() => {
|
if (voiceButton) {
|
||||||
const voiceButton = document.querySelector('[aria-label="voice input"]') as HTMLButtonElement;
|
voiceButton.click();
|
||||||
if (voiceButton) {
|
}
|
||||||
voiceButton.click();
|
}}
|
||||||
}
|
sx={{
|
||||||
}}
|
bgcolor: '#FF69B4',
|
||||||
sx={{
|
color: 'white',
|
||||||
bgcolor: '#FF69B4',
|
width: 48,
|
||||||
color: 'white',
|
height: 48,
|
||||||
width: 48,
|
'&:hover': {
|
||||||
height: 48,
|
bgcolor: '#FF1493',
|
||||||
'&:hover': {
|
},
|
||||||
bgcolor: '#FF1493',
|
}}
|
||||||
},
|
>
|
||||||
}}
|
<Mic />
|
||||||
>
|
</IconButton>
|
||||||
<Mic />
|
}
|
||||||
</IconButton>
|
sx={{ minWidth: 80 }}
|
||||||
</Box>
|
/>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
return (
|
return (
|
||||||
|
|||||||
Reference in New Issue
Block a user