2023-09-05 12:29:08 +05:30

33 lines
914 B
TypeScript

import { Button, Tooltip } from '@mui/material';
import React, { useState } from 'react';
type Props = {
index: number;
defaultValue: number;
onUpdate: (data: any) => void;
disabled?: boolean;
};
const Rating = ({index, defaultValue, onUpdate, disabled} : Props) => {
return (
<div key={index} className='rating-div'>
{[...Array(10)].map((star, ind) => {
return (
<Tooltip title={(ind+1) < 3 ? 'No Pain' : (ind+1) > 7 ? 'Unbearable' : ''} placement="top-end">
<Button
className={`btn btn-scale btn-scale-asc-${ind+1} ${(ind+1) === defaultValue ? 'selected' : ''}`}
key={ind + 1}
onClick={() => onUpdate({ index: index, severity: ind + 1 })}
disabled={disabled}
>
{ind + 1}
</Button>
</Tooltip>
);
})}
</div>
);
};
export default Rating;