// ** MUI Imports import Grid from '@mui/material/Grid' import Typography from '@mui/material/Typography' // ** Custom Components Imports import CardSnippet from 'src/@core/components/card-snippet' // ** Demo Components Imports import RatingsHalf from 'src/views/components/ratings/RatingsHalf' import RatingsBasic from 'src/views/components/ratings/RatingsBasic' import RatingsSizes from 'src/views/components/ratings/RatingsSizes' import RatingsCustomized from 'src/views/components/ratings/RatingsCustomized' import RatingsHoverFeedback from 'src/views/components/ratings/RatingsHoverFeedback' // ** Source code imports import * as source from 'src/views/components/ratings/RatingsSourceCode' const Ratings = () => { return ( Use name prop to name the rating and use value or defaultValue prop to set any initial value to a rating. Use icon or emptyIcon prop to change default icon or empty icon respectively,{' '} max prop to set number of ratings and IconContainerComponent prop to change every icons in the ratings. Use precision prop to define the minimum increment value change allowed. Use size={`{'small' | 'large'}`} prop for different sizes of ratings. You can display a label on hover to help users pick the correct rating value. The demo uses the{' '} onChangeActive prop. ) } export default Ratings