// ** React Imports import { useState } from 'react' // ** MUI Imports import Box from '@mui/material/Box' import Rating from '@mui/material/Rating' import Typography from '@mui/material/Typography' const labels: { [index: string]: string } = { 0.5: 'Useless', 1: 'Useless+', 1.5: 'Poor', 2: 'Poor+', 2.5: 'Ok', 3: 'Ok+', 3.5: 'Good', 4: 'Good+', 4.5: 'Excellent', 5: 'Excellent+' } const RatingsHoverFeedback = () => { // ** States const [hover, setHover] = useState(-1) const [value, setValue] = useState(2) return ( setValue(newValue)} onChangeActive={(event, newHover) => setHover(newHover)} /> {value !== null && {labels[hover !== -1 ? hover : value]}} ) } export default RatingsHoverFeedback