2024-07-02 14:12:48 +02:00

42 lines
1.1 KiB
TypeScript

import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography";
import React from "react";
import classes from "./classes.module.scss";
type IProps = {
percentage: number;
};
type IState = {};
export default class OcrResult extends React.Component<IProps, IState> {
public override render(): JSX.Element | null {
return (
<div className={classes["root"]}>
<Typography typo={ITypo.P_16} className={classes["result-text"]}>
Résultat de l'analyse :
</Typography>
<div className={classes["result-container"]}>
<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
Document conforme à :&nbsp;
</Typography>
<div className={classes["percentage-container"]}>
<Typography typo={ITypo.P_18} color={this.getColor()}>
{this.props.percentage}%
</Typography>
<div className={classes["dot"]} data-color={this.getColor()} />
</div>
</div>
</div>
);
}
private getColor() {
if (this.props.percentage > 75) {
return ITypoColor.COLOR_SUCCESS_600;
} else {
return ITypoColor.COLOR_ERROR_600;
}
}
}