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
|
import { FunctionComponent } from "react";
import {
Alert,
em,
Flex,
Group,
List,
Popover,
Stack,
Text,
} from "@mantine/core";
import { useHover, useMediaQuery } from "@mantine/hooks";
import {
faCheckCircle,
faExclamationCircle,
faListCheck,
faMinus,
faPlus,
} from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { BuildKey } from "@/utilities";
interface StateIconProps {
matches: string[];
dont: string[];
isHistory: boolean;
}
const StateIcon: FunctionComponent<StateIconProps> = ({
matches,
dont,
isHistory,
}) => {
const hasIssues = dont.length > 0;
const { hovered, ref } = useHover();
const isMobile = useMediaQuery(`(max-width: ${em(750)})`);
const PopoverTarget: FunctionComponent = () => {
if (isHistory) {
return <FontAwesomeIcon icon={faListCheck} />;
} else {
return (
<Text c={hasIssues ? "yellow" : "green"} span>
<FontAwesomeIcon
icon={hasIssues ? faExclamationCircle : faCheckCircle}
/>
</Text>
);
}
};
return (
<Popover opened={hovered} position="top" width={360} withArrow withinPortal>
<Popover.Target>
<Text ref={ref}>
<PopoverTarget />
</Text>
</Popover.Target>
<Popover.Dropdown>
<Text size="xl" ta="center">
Scoring Criteria
</Text>
{isMobile ? null : (
<Alert variant="light" color="blue" mb="sm">
Not matching attributes will not prevent the subtitle to be
downloaded and are strictly used for scoring the subtitle.
</Alert>
)}
<Group justify="left" gap="xl" wrap="nowrap" grow>
<Stack align="flex-start" justify="flex-start" gap="xs" mb="auto">
<Flex gap="sm">
<Text c="green">
<FontAwesomeIcon icon={faPlus}></FontAwesomeIcon>
</Text>
<Text c="green">Matching</Text>
</Flex>
<List>
{matches.map((v, idx) => (
<List.Item key={BuildKey(idx, v, "match")}>{v}</List.Item>
))}
</List>
</Stack>
<Stack align="flex-start" justify="flex-start" gap="xs" mb="auto">
<Flex gap="sm">
<Text c="yellow">
<FontAwesomeIcon icon={faMinus}></FontAwesomeIcon>
</Text>
<Text c="yellow">Not Matching</Text>
</Flex>
<List>
{dont.map((v, idx) => (
<List.Item key={BuildKey(idx, v, "miss")}>{v}</List.Item>
))}
</List>
</Stack>
</Group>
</Popover.Dropdown>
</Popover>
);
};
export default StateIcon;
|
