// ** MUI Imports import Box from '@mui/material/Box' import TreeView from '@mui/lab/TreeView' import { styled } from '@mui/material/styles' import Typography from '@mui/material/Typography' import TreeItem, { TreeItemProps } from '@mui/lab/TreeItem' // ** Custom Icon Import import Icon from 'src/@core/components/icon' interface Props { direction: 'ltr' | 'rtl' } type StyledTreeItemProps = TreeItemProps & { labelText: string labelIcon: string labelInfo?: string } // Styled TreeItem component const StyledTreeItemRoot = styled(TreeItem)(({ theme }) => ({ '&:hover > .MuiTreeItem-content:not(.Mui-selected)': { backgroundColor: theme.palette.action.hover }, '& .MuiTreeItem-content': { paddingRight: theme.spacing(3), borderTopRightRadius: theme.spacing(4), borderBottomRightRadius: theme.spacing(4), fontWeight: theme.typography.fontWeightMedium }, '& .MuiTreeItem-label': { fontWeight: 'inherit', paddingRight: theme.spacing(3) }, '& .MuiTreeItem-group': { marginLeft: 0, '& .MuiTreeItem-content': { paddingLeft: theme.spacing(4), fontWeight: theme.typography.fontWeightRegular } } })) const StyledTreeItem = (props: StyledTreeItemProps) => { // ** Props const { labelText, labelIcon, labelInfo, ...other } = props return ( {labelText} {labelInfo ? ( {labelInfo} ) : null} } /> ) } const TreeViewGmailClone = ({ direction }: Props) => { const ExpandIcon = return ( } > ) } export default TreeViewGmailClone