Spaces:
Running
Running
File size: 1,790 Bytes
351d460 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 |
import { Button, Container } from '@ifrc-go/ui';
import styles from '../../pages/UploadPage/UploadPage.module.css';
interface RatingSectionProps {
isPerformanceConfirmed: boolean;
scores: {
accuracy: number;
context: number;
usability: number;
};
onScoreChange: (key: 'accuracy' | 'context' | 'usability', value: number) => void;
onConfirmRatings: () => void;
onEditRatings: () => void;
}
export default function RatingSection({
isPerformanceConfirmed,
scores,
onScoreChange,
onConfirmRatings,
onEditRatings,
}: RatingSectionProps) {
// Don't render anything if ratings are confirmed
if (isPerformanceConfirmed) {
return null;
}
return (
<Container
heading="AI Performance Rating"
headingLevel={3}
withHeaderBorder
withInternalPadding
>
<div className={styles.ratingContent}>
<p className={styles.ratingDescription}>How well did the AI perform on the task?</p>
{(['accuracy', 'context', 'usability'] as const).map((k) => (
<div key={k} className={styles.ratingSlider}>
<label className={styles.ratingLabel}>{k}</label>
<input
type="range"
min={0}
max={100}
value={scores[k]}
onChange={(e) => onScoreChange(k, Number(e.target.value))}
className={styles.ratingInput}
/>
<span className={styles.ratingValue}>{scores[k]}</span>
</div>
))}
<div className={styles.confirmButtonContainer}>
<Button
name="confirm-ratings"
variant="secondary"
onClick={onConfirmRatings}
>
Confirm Ratings
</Button>
</div>
</div>
</Container>
);
}
|