aletheia/src/components/Form/ClassificationModal.tsx at af47058f782a9c7636f1d0c699b70cbaa80e5ce7 · AletheiaFact/aletheia · GitHub

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
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
import { useTranslation } from "next-i18next";
import React from "react";
import AletheiaButton, { ButtonType } from "../Button";
import ClassificationText from "../ClassificationText";
import { AletheiaModal, ModalCancelButton } from "../Modal/AletheiaModal.style";
import { Radio, RadioGroup, FormControlLabel } from "@mui/material";
import styled from "styled-components";

const ClassificationModal = ({
    open,
    value,
    setValue,
    handleOk,
    handleCancel,
}) => {
    const { t } = useTranslation();
    const onChangeRadio = (e) => {
        setValue(e.target.value);
    };

    const StyledRadio = styled(Radio)`
    padding: 4px;
    transform: scale(0.8);
`;

    const classificationTextStyle = {
        fontFamily: 'Open Sans, sans-serif',
        fontWeight: "bold",
        fontSize: "14px",
    };

    return (
        <AletheiaModal
            open={open}
            footer={false}
            onCancel={handleCancel}
            setValue={setValue}
            title={t("claimReviewForm:classificationLabel")}
            style={{
                display: "flex",
                alingItens: "center",
            }}
        >
            <RadioGroup
                onChange={onChangeRadio}
                value={value}
                style={{
                    display: "flex",
                    gap: "24px",
                    flexDirection: "column",
                }}
            >
                <FormControlLabel
                    value="not-fact"
                    control={<StyledRadio />}
                    label={<ClassificationText classification="not-fact" style={classificationTextStyle} />}
                />
                <FormControlLabel
                    value="trustworthy"
                    control={<StyledRadio />}
                    label={<ClassificationText classification="trustworthy" style={classificationTextStyle} />}
                />
                <FormControlLabel
                    value="trustworthy-but"
                    control={<StyledRadio />}
                    label={<ClassificationText classification="trustworthy-but" style={classificationTextStyle} />}
                />
                <FormControlLabel
                    value="arguable"
                    control={<StyledRadio />}
                    label={<ClassificationText classification="arguable" style={classificationTextStyle} />}
                />
                <FormControlLabel
                    value="misleading"
                    control={<StyledRadio />}
                    label={<ClassificationText classification="misleading" style={classificationTextStyle} />}
                />
                <FormControlLabel
                    value="false"
                    control={<StyledRadio />}
                    label={<ClassificationText classification="false" style={classificationTextStyle} />}
                />
                <FormControlLabel
                    value="unsustainable"
                    control={<StyledRadio />}
                    label={<ClassificationText classification="unsustainable" style={classificationTextStyle} />}
                />
                <FormControlLabel
                    value="exaggerated"
                    control={<StyledRadio />}
                    label={<ClassificationText classification="exaggerated" style={classificationTextStyle} />}
                />
                <FormControlLabel
                    value="unverifiable"
                    control={<StyledRadio />}
                    label={<ClassificationText classification="unverifiable" style={classificationTextStyle} />}
                />
            </RadioGroup>
            <div
                style={{
                    marginTop: 30,
                    display: "flex",
                }}
            >
                <ModalCancelButton
                    type="text"
                    onClick={handleCancel}
                    style={{ width: "62%" }}
                >
                    <span>{t("orderModal:cancelButton")}</span>
                </ModalCancelButton>

                <AletheiaButton
                    type={ButtonType.blue}
                    onClick={handleOk}
                    style={{ width: "48%", paddingTop: 0 }}
                >
                    {t("orderModal:okButton")}
                </AletheiaButton>
            </div>
        </AletheiaModal>
    );
};

export default ClassificationModal;