FINAL-PROJECT-FRONT/src/components/HomePage/ContactsBar/SearchBar/index.tsx

import BottomNavigation from '@mui/material/BottomNavigation';
import BottomNavigationAction from '@mui/material/BottomNavigationAction';
import React, { useState } from 'react';
import { makeStyles } from '@material-ui/core'

import ChatListRecent from './ChatListRecent'

const useStyles = makeStyles({
    bottomNavigation: {
        boxShadow: '0px 1px 1px 1px rgba(120,120,120,0.63)',
        marginBottom: 20
    },
    icon: {
        marginBottom:0,
    },
    underline: {
        fontSize: 30,
        lineHeight:0
    },
})

const SearchBar = () => {
    const [isActive, setIsActive] = useState<number>(0)
    const handleIsActive = (_e: React.SyntheticEvent<Element, Event>, newValue: number): void => setIsActive(newValue)
    const classes = useStyles()
    const Icon = ({ name }: { name: string }) => <span className={classes.icon}>{name}</span>
    const Label = () => <span className={classes.underline}>__</span>
    return (
    <>
      <BottomNavigation
        showLabels
        value={isActive}
        onChange={handleIsActive}
        className={classes.bottomNavigation}
      >
            <BottomNavigationAction label={<Label/>} icon={<Icon name='Chats' />} />
            <BottomNavigationAction label={<Label/>} icon={<Icon name='Media' />} />
            <BottomNavigationAction label={<Label/>} icon={<Icon name='Links' />} />
            <BottomNavigationAction label={<Label/>} icon={<Icon name='Files' />} />
            <BottomNavigationAction label={<Label/>} icon={<Icon name='Music' />}  />
            <BottomNavigationAction label={<Label/>} icon={<Icon name='Voice' />}  />
        </BottomNavigation>
       {isActive === 0&&<ChatListRecent/>}
    </>      
    )
}

export default SearchBar