FINAL-PROJECT-FRONT/src/components/HomePage/LeftBar/SearchLists/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'
import NotDoneList from '../../../reusableComponents/NotDoneList';

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

const SearchLists = ({value}:{value:string}) => {
    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='Files' />} />
            <BottomNavigationAction label={<Label />} icon={<Icon name='Audio' />} />
            <BottomNavigationAction label={<Label/>} icon={<Icon name='Video' />} />
        </BottomNavigation>
            {isActive === 0 && <ChatListRecent value={value}/>}
            {isActive === 1 && <NotDoneList name='Media'/>}
            {isActive === 2 && <NotDoneList name='Links'/>}
            {isActive === 3 && <NotDoneList name='Files'/>}
            {isActive === 4 && <NotDoneList name='Music'/>}
            {isActive === 5 && <NotDoneList name='Voice'/>}
    </>      
    )
}

export default SearchLists